Lightweight jQuery Tooltip Enhancement Plugin - tipsy.js

tipsy.js is a lightweight jQuery plugin for creating animated tooltips with support for various customization options and trigger events.

Features:

• Lightweight and easy to use.
• Displays tooltips based on tag's title or data-title attributes.
• Custom fade-in / fade-out animations.
• Custom positions.
• Tooltips can be triggered by click, hover, focus or manual.
• onShow and onHide callback events support.

How to use it:

1. Load the jquery.tipsy.css for basic tooltip styles.

<link href="css/jquery.tipsy.css" rel="stylesheet">

2. Load jQuery plugin and the jquery.tipsy.js at the end of the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.tipsy.js"></script>

3. Add the tooltip text into tag's title or data-title attributes.

<a href="#" title="I'm A Tooltip">Hover me</a>

4. Call the plugin with customization options.

$('a').tipsy({

// arrow width
arrowWidth: 10, //arrow css border-width * 2, default is 5 * 2

// default attributes for tipsy
// data-tipsy-position | data-tipsy-offset | data-tipsy-disabled
attr: 'data-tipsy', 

// custom class
cls: null, 

// fadeIn, fadeOut animation duration
duration: 150, 

// offset from element
offset: 7,

// top-left | top-center | top-right | bottom-left
// bottom-center | bottom-right | left | right
position: 'top-center', 

// hover | focus | click | manual
trigger: 'hover',

// events
onShow: null,
onHide: null 

})

5. You can also pass the options directly in the html using data-tipsy-OPTION attributes as shown below:

• data-title: tooltip text
• data-tipsy-disabled: disable the tooltip
• data-tipsy-position: position option
• data-tipsy-offset: offset option

6. Public methods. To use these methods, make sure to set the trigger opiton to manul.

$('a').tipsy.("show");
$('a').tipsy("hide");
$('a').trigger("tipsy.show");
$('a').trigger("tipsy.hide");

Change log:

2015-09-03

• Move positioning to after class is set

---

This awesome jQuery plugin is developed by CreativeDream. For more Advanced Usages, please check the demo page or visit the official website.