Question

HTML:

<a href="#" rel="tooltip">Open Tooltip</a>
<div id="tooltip">Tooltip Content</div>

I checked out some tooltip plugins but my requirement is a really basic tooltip that shows a hidden div on hover. All plugins either have too many advanced options that I don’t require and have already styled tooltips that might be difficult to modify.

I’d appreciate any help. Thanks.

Answer 1

You can roll your own.

My suggestion is just to store the clientX and clientY properties of the mouse event object that is passed to the onmouseover event handler. Then set the CSS onscreen position ( left, top ) of the hidden div to those coordinates and you’re golden. Make sure that the div’s position CSS property is absolute

A quick untested example just to give you an idea:

$( '[rel="tooltip"]' ).hover( function(e) {
   var x = e.clientX;
   var y = e.clientY;
   _div.css( { top: y, left: x, position: 'absolute' } )
       .fadeIn();
}, function() {
    _div.fadeOut();
} );