Tooltip moving with cursor

Question

Image

 ul#listcontainer .li1 { display: block; width: 210px; height: 130px; border: 1px solid red; position: relative; } .li1 span { position: absolute; top: 140px; left: 0px; right: 0; width: 220px; padding: 2px 0; background-color: #000; background-color: rgba(0, 0, 0, 0.65); color: #fff; opacity: 0; transition: opacity .5s ease-in-out; text-align: center; font-family: Arial; font-size: 14px; } .li1:hover span { opacity: 1; } .li1:hover span:hover { opacity: 0; } 

 <ul id="listcontainer"> <li class="li1"> <img src="images/li1.png"><span><b>Exteriors:</b> <br>Minimal Wear, Battle Scarred<br><br><img src="images/tick.png"><br>&nbsp;</span> </li> </ul> 

Hello everyone. So I made a tooltip showing after I hover the box with red border. The thing I want is that when I hover over the div with red border - the tooltip begin to moving/following with the mouse. Tried to search how to do it but I didn't found answer. I think it will be some jQuery code... I let you guys tell me. Thanks.

Answer 1

Try this code and no need to change the css as shown in this http://jsfiddle.net/bo113jxu/8/ :

$('.li1').mousemove(function (e) {
    $('span', this).css({left: e.pageX - 100, top: e.pageY + 10});
});

---

EDIT:

The position:absolute will work good as long as there's only one .li1 element, but in case we have more .li1 elements we'd face a problem shown in this jsfiddle demo1 ; TO fix this the position of .li1 should be set to fixed jsfiddle demo2 .. just like what @ViktorMaksimov ^kudos said in his answer which I was wrong about it.

Answer 2

CSS code:

.li1 span {
  position: fixed;
  margin-left: -110px;
}

jQuery code:

$(document).ready(function() {
 $('.li1').mousemove(function( event ) {
   $(this).find('span').css({    //Position the tooltip
    'left' : event.pageX + 'px', //Left position - the X position of the mouse
    "top" : (event.pageY + 20) + 'px' //Top position - the Y position of the mouse 
   });
 });
});

Firstly the tooltip should be positioned fixed. When you are moving the mouse inside the <li> element the tooltip will have left position - the position on X of the mouse to the window, and top position the position on Y of the mouse + 20, because the tooltip not to be exactly next to the mouse, because if you move your mouse fast enough the tooltip will hide. And we are setting margin-left to the tooltip - negative value half of its width to make the tooltip centered to the mouse.