tipsy - Facebook-style tooltip plugin for jQuery


Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.

Examples & Usage


By default, tooltips will appear centred underneath their anchor:

Hover over me

Basic example:


Using the gravity parameter, it's possible to control the positioning of the tooltip relative to the pointee:

North South
East West
Gravity example:
$('#foo').tipsy({gravity: 'n'}); // n | s | e | w

As of version 0.1.3, it's possible to use a callback function to set the gravity dynamically at hover-time. Within the callback, this refers to the active element, and the function should return the calculated gravity as a string. Two demo callbacks are supplied - $.fn.tipsy.autoNS and $.fn.tipsy.autoWE - which select north/south and west/east gravity, respectively, based on the element's location in the viewport.

Here's an example (scroll the page to see the effect):

Dynamic Gravity
Dynamic gravity example:
$('#foo').tipsy({gravity: $.fn.tipsy.autoNS});


For full Wob2.0 compliance, you must fade these badboys in:

Hover over me

Fade example:
$('#example-fade').tipsy({fade: true});

Bonus Feature

You can EVEN COMBINE FADE AND GRAVITY! (exercise for reader)

Slightly Advanced Usage

Tooltip text can be set based on any attribute, not just title:

Hover over me

Custom attribute example:
$('#example-custom-attribute').tipsy({title: 'id'});

If any attribute isn't good enough, you may pass a callback function instead. It should return the tooltip text for this element:

Hover over me

Callback example:
$('#example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } });

Finally, it is possible to specify a fallback tooltip for any element which does not have any tooltip text:

Hover over me

Fallback example:
$('#example-fallback').tipsy({fallback: "Where's my tooltip yo'?" });

If your tooltip content contains HTML, set the html option to true (relies on invalid HTML, sorry):

Hover over me

HTML example:
$('#example-html').tipsy({html: true });


Tipsy needs to erase any existing value for an element's title attribute in order to suppress the browser's native tooltips. It is stashed in the element's original-title attribute in case you need to retrieve it later.

As of version 0.1.4, the tooltip text is recomputed on every hover event so updating the title attribute will have the expected effect.



Package downloads are available from the jQuery project page.


jason@donut ~ $ git clone git://