Custom CSS3 Animated Tooltip Plugin For jQuery - TootleTips

TootleTips is a highly customizable jQuery tooltip plugin that supports HTML content and uses CSS3 transitions for the smooth animations. This plugin requires jQuery easing library to work well on browsers that don't support CSS3 transitions.

How to use it:

1. Load the needed jQuery library and jQuery easing plugin in your html document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.easing.min.js"></script>

2. Load the jQuery TootleTips plugin's JavaScript and CSS files in the document.

<link rel="stylesheet" href="tootletips.css">
<script src="tootletips.js"></script>

3. Use 'title' or any other valid attributes on the html element to define the tooltip content like this:

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

4. You're also allowed to embed any html content to the tooltip:

<button title="<b><span style='color:red;'>N</span>otifs</b>Hover Me</button>

5. Initialize the tooltip plugin and we're done.

$('[title]').tootletip();     

6. Full customization options with default values.

$('[title]').tootletip({
  bottomGuage:9,
  resetPosition:false,
  showTip:false, // show tooltip arrows
  eventsTriggerIn:"",
  eventsTriggerOut:"",
  preferedPosition:"bottom",
  attributes:["title"],
  delay:0,
  tipEvents:{
    onFinishIn:function(){},
    onFinishOut:function(){}
  }   
});       

---

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