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/

Related: http://stackoverflow.com/questions/15702867/html-tooltip-position-relative-to-mouse-pointer — Dave Chen, Mar 21 '14 at 03:20

score 20 · Answer 1 · answered Mar 21 '14 at 03:23

20

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

answered Mar 21 '14 at 03:23

adeneo

312,895
29
395
388

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 http://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. – Greenhoe Mar 21 '14 at 04:58
1

@Greenhoe - Just add or subtract a little, like this -> http://jsfiddle.net/q46Xz/188/ – adeneo Mar 21 '14 at 11:42
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? – Greenhoe Mar 21 '14 at 13:06
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. – adeneo Mar 21 '14 at 13:07
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 http://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. – Greenhoe Mar 21 '14 at 13:14
2

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**](http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.js), 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. – adeneo Mar 21 '14 at 13:26
1

Understandable, thank you for helping me out with understanding this all better, I'll look into the plugin you recommend – Greenhoe Mar 21 '14 at 13:53

John Slegers · Answer 2 · 2018-04-10T15:33:24.530

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)

It looks ike an awesome thing, but unfortunatelly doesn't work correctly when applied to `` elements of a table: the tip only shows up long after the table is finished, near or even beyond a page's footer. — parsecer, Jan 04 '20 at 23:24

Make CSS tooltip follow cursor

2 Answers2

Linked