Simple Customizable jQuery Tooltip Plugin - GetTip

GetTip is a simple lightweight jQuery plugin for creating tooltips from element's title attribute that comes with several options for custom position, delay, duration and trigger event.

Features:

• Display on hover, click or focus.
• Options can be passed via html5 data-tooltip attribute.
• Auto dismiss after a timeout.
• Custom fade in/out transitions.

How to use it:

1. Include jQuery library and the jQuery GetTip plugin's stylesheet and JS files on the web page.

<script src="jquery.min.js"></script>
<script src="js/jquery.gettip.js"></script>

2. Create a default tooltip from title attribute on your element.

<button title="I am a tooltip">Hover Me</button>

3. Pass the options to the tooltip directly in the markup using html5 data-tooltip attribute.

<button data-tooltip="{OPTIONS HERE}" title="I am a tooltip">Hover Me</button>

4. Initialize the plugin.

$('[data-tooltip]').getTip();

5. Options and defaults.

// Offset tooltip
"offset" : 8, 

// Position where the tooltip should appear 
// ("left", "top", "right", "bottom")
"pos" : "top", 

// Event used to trigger tooltip 
// ("hover", "click", "focus")
"on" : "hover", 

// Delay before showing a tooltip
"delay" : 0, 

// Duration of animation events
"duration" : 200, 

---

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