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
Basic example:
$('#example-1').tipsy();
Gravities
Using the gravity parameter, it's possible to control the positioning of the tooltip relative to the pointee:
Northwest North Northeast
West East
Southwest South Southeast
Gravity example:
$('#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):
Dynamic Gravity
Dynamic gravity example:
$('#foo').tipsy({gravity: $.fn.tipsy.autoNS});
Fading
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 });
Show/Hide Delay
Delay example:
$('#example-delay').tipsy({delayIn: 500, delayOut: 1000});
Hover and wait
Dynamically Updating Text
Tipsy tooltips are 'live' - if the source attribute's value changes, the tooltip text will be updated the next time the tooltip is shown. There's one caveat - if you wish to remove the tooltip by setting the title attribute to an empty string, set the original-title attribute instead (this only applies if you're using the title attribute).
Form input tooltips code:
<script type='text/javascript'>
$(function() {
$('#focus-example [title]').tipsy({trigger: 'focus', gravity: 'w'});
});
</script>
Manually Triggering a Tooltip
It's possible to disable hover events and instead trigger tooltips manually:
Manual triggering example:
My tooltip is manually triggered | Show it | Hide it
Code for manual triggering:
<p id='manual-example'>
<a rel='tipsy' title='Well hello there'>My tooltip is manually triggered</a>
<a href='#' onclick='$("#manual-example a[rel=tipsy]").tipsy("show"); return false;'>Show</a>
<a href='#' onclick='$("#manual-example a[rel=tipsy]").tipsy("hide"); return false;'>Hide</a>
</p>
<script type='text/javascript'>
$('#manual-example a[rel=tipsy]').tipsy({trigger: 'manual'});
</script>
