Onmousemove event with jquery

Question

I’m trying to recreate this tooltip http://jsfiddle.net/HJf8q/ with jQuery.

$(document).ready(function(){
  $(".tooltip").mousemove(function(event) {
    $(".text").style.top = (event.pageY + 20) + "px";
    $(".text").style.left = (event.pageX + 20) + "px";
  });
});

.tooltip {
  position: relative;
}

.tooltip span {
  display:none;
}

.tooltip:hover span {
  display:block;
  position:fixed;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip">
  <span class="text">Texto</span>
  <p>Passe o mouse aqui.</p>
</div>

However, Text does not follow mouse movement. Could someone tell me how to do this?

Answer 1

Like quoted by Anderson, it would be necessary a response that is flexible to the number of tooltips that you have on the page.

Based on that link, created this example that will apply the effect to all tooltips present in the document.

How are you wearing jquery, I felt free to use the method css() to make the changes.

$(document).ready(function(){
  $('.tooltip').each(function(){
    $(this).mousemove(function(ev){
      var x = ev.clientX,
          y = ev.clientY
      $(".text", this).css("top", (y + 20) + "px"); 
      $(".text", this).css("left", (x + 20) + "px") ;
    })
  }); 
});

.tooltip {
  position: relative;
}

.tooltip span {
  display:none;
}

.tooltip:hover span {
  display:block;
  position:fixed;
  overflow:hidden;
}

<div class="tooltip">
  <span class="text">Texto</span>
  <p>Passe o mouse aqui.</p>
</div>

<div class="tooltip">
  <span class="text">Outro texto</span>
  <p>Outro tooltip</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

How you are trying to find an element by class indicates that you want the first element found in case [0] the first position.

From a look at the example I made below, I hope I’ve helped...

$(document).ready(function(){
  $(".tooltip").mousemove(function(event) {
    $(".text")[0].style.top = (event.pageY + 20) + "px";
    $(".text")[0].style.left = (event.pageX + 20) + "px";
  });
});

.tooltip {
  position: relative;
}

.tooltip span {
  display:none;
}

.tooltip:hover span {
  display:block;
  position:fixed;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip">
  <span class="text">Texto</span>
  <p>Passe o mouse aqui.</p>
</div>