Overview

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

Examples & Usage

Basic

By default, tooltips will appear centred underneath their anchor:

Hover over me

$('#example-1').tipsy();

Gravities

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

$('#foo').tipsy({gravity: 'n'}); // nw | n | ne | w | e | sw | s | se

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):

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

Fading

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

Hover over me

$('#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