CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Martinez
Martinez

Reputation: 149

Tooltip moving with cursor

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.

Upvotes: 2

Views: 8222

Answers (2)

Mi-Creativity
Mi-Creativity

Reputation: 9664

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.

Upvotes: 5

Viktor Maksimov
Viktor Maksimov

Reputation: 1465

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.

Upvotes: 2

Related Questions