Make CSS tooltip follow cursor

Question

I'm creating a CSS based tooltip that is going to have a lot of content in the tooltip and instead of being in a static place I was wondering is there a easy way to make it follow the cursor as you hover over the link.

Here is a example of the CSS based tooltip

<div class="couponcode">First Link
    <span class="coupontooltip">Content 1</span>
</div>

.couponcode:hover .coupontooltip {
display: block;
}

.coupontooltip {
display: none;
background: #C8C8C8;
margin-left: 28px;
padding: 10px;
position: absolute;
z-index: 1000;
width:200px;
height:100px;
}

http://jsfiddle.net/q46Xz/

Middlesworth

Related: #15703367 – Allianora

Answer 1

Something like this

var tooltip = document.querySelectorAll('.coupontooltip');

document.addEventListener('mousemove', fn, false);

function fn(e) {
    for (var i=tooltip.length; i--;) {
        tooltip[i].style.left = e.pageX + 'px';
        tooltip[i].style.top = e.pageY + 'px';
    }
}

FIDDLE

Twice

Thank you, I have it working although how do I adjust how close to the mouse the tooltip is? If you look at my page stormable.com/hero-lore-demon-hunter at the bottom of the post you'll see a link called "illidan" and if you put your cursor over it you'll notice the tooltip goes with the cursor but is like 200px below it and to the right. – Middlesworth

@Middlesworth - Just add or subtract a little, like this -> jsfiddle.net/q46Xz/188 – Twice

Thank you, although can you explain why the original fiddle and my site use the same code but display it at different length from the cursor? I'm having to set pageX - 275 and pageY around - 100. Why does my site already have these values so off like that that I need to readjust them? – Middlesworth

pageX/Y is the mouse position in the window, so if the elements are positioned with relative/absolute/static etc. the top and left positions can be quite different than the mouse position etc. – Twice

the problem with using this method is that when I adjust the window the location of the tooltip moves and everyone is going to have a different size window. If you take a look at dotabuff.com/heroes/alchemist/items and hover over the icons you'll see how the tooltips follow the mouse but also it doesn't matter if you adjust the browser size either. – Middlesworth

A proper plugin would account for the window resize, browser inconsistency etc. but you can't expect to get that here, the answer shows you how to move something along with the mouse cursor, if you want something that works with every scenario use a plugin. Here's the source for qTip, and there's no way I can write all that code as a quick answer, proper tooltips are complicated, and that's why most people use a plugin. – Twice

Understandable, thank you for helping me out with understanding this all better, I'll look into the plugin you recommend – Middlesworth

Answer 2

Here's a version that keeps into account the height and width of your window:

function showTooltip(e) {
  var tooltip = e.target.classList.contains("coupontooltip")
      ? e.target
      : e.target.querySelector(":scope .coupontooltip");
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}

var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mousemove', showTooltip);
}

.couponcode {
    color: red;
    cursor: pointer;
}

.couponcode:hover .coupontooltip {
    display: block;
}

.coupontooltip {
    position: absolute;
    white-space: nowrap;
    display: none;
    background: #ffffcc;
    border: 1px solid black;
    color: black;
    padding: 5px;
    z-index: 1000;
}

Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="coupontooltip">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="coupontooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="coupontooltip">This is yet
another tooltip</span></span>.

(see also this Fiddle)

Quinta

It looks ike an awesome thing, but unfortunatelly doesn't work correctly when applied to <td> elements of a table: the tip only shows up long after the table is finished, near or even beyond a page's footer. – Rosalynrosalynd