Super Easy jQuery Tool-Tips Plugin | Evan Byrne' Writings

This simple jQuery plugin allows you to attach a neat, customizable tool-tip to any HTML element. Did I mention it degrades nicely for users without JavaScript?

The tool-tips also move with the pointer, so they are also kinda 'track-tips'. You can see the Basic Demo and the Advance Demo.

Basic usage of the plugin is really easy. Just add a title attribute with the text you want in the tooltip to the desired element, like so:

la la la <span class="someclass" title="My Tooltip Text">oooh</span>

Then add the following jQuery to the page:

$('.someclass').tooltip('#tooltip');

Then add the tool-tip element to the page. This is what your tool-tip will appear in:

<div id="tooltip"></div>

Style #tooltip with CSS however you want, but make sure you at least have these two styles in place:

#tooltip{
  position:absolute; // Make sure it positions correctly
  display:none; // Hide the tooltip
}

You can also change the offset from the pointer that the tool-tip appears like so:

$('.someclass').tooltip('#tooltip',20,-10);

That would create a tool-tip positioned 20px to the right of the pointer and 10px above the pointer.

You can download the plugin here.

Comment

See what others have to say on this topic, or add your own two cents.