Animated & Dynamic jQuery Tooltip Plugin - TipsyAPI

TipsyAPI is a fully customizable jQuery tooltip plugin that supports dynamic content (text, images, videos, etc) and awesome transition effects.

Basic Usage:

1. Include the jQuery library and jQuery TipsyAPI plugin at the end of the Html page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tipsy.js"></script>

2. Create an Html element that will show up a tooltip on hover. The hoverable element can be any html element, not only <a> tag. Use tipsy attribute to specify the 

<a tipsy="example">Hover over me</a>

3. Wrap the tooltip content in a container with the same tipsy attribute

<div class="tipsy" tipsy="example">
Your content goes here.
</div>

4. Call the plugin on the hoverable element with default settings.

<script type="text/javascript">
$(document).ready(function() {
$('a').tipsy();	
});		
</script>

5. Options and defaults.

<script type="text/javascript">
$(document).ready(function() {
$('a').tipsy({
background: 'white', // The background color
color: 'black', // The font color
padding: '2.5%', // The div padding
squircle: false, // Squircle tooltip
width: '75%', // Width of the tooltip
effect: 'fade', // Type of animation effect, fade or slide
handler: 'hover' // How the tooltip is handled, hover of click
});
});
</script>

---

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