onmousemove event with jquery

Question

onmousemove event with jquery

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm trying to recreate this tooltip link 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><divclass="tooltip">
  <span class="text">Texto</span>
  <p>Passe o mouse aqui.</p>
</div>

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

jquery tooltip

asked by anonymous 08.10.2018 / 05:47

2 answers

0

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

Take a look at the example below, I hope I have 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><divclass="tooltip">
  <span class="text">Texto</span>
  <p>Passe o mouse aqui.</p>
</div>

08.10.2018 / 14:18

The python programming language can be used together with html How to get mysql data for a shopping cart

score 1 · Accepted Answer

As quoted by Anderson, you would need a response that is flexible to the number of tooltips you have on the page.

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

Since you're using jquery , I felt free to use the css() method 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>