Minimal HTML5 Tooltip Plugin For jQuery - jquery.tooltip.js

jquery.tooltip.js is a small (~1kb minified) jQuery tooltip plugin which helps you display customizable, absolutely positioned HTML5 tooltip over DOM elements. 

How to use it:

1. Link to the required JavaScript and CSS files as displayed below:

<link href="jquery.tooltip.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.tooltip.js"></script>

2. The plugin automatically extracts tooltip contents from data-tt attribute:

<p class="demo" 
   data-tt="A beautiful tooltip...">
   Hover Me
</p>

3. Rich text is supported as well.

<p class="demo" 
   data-tt="<b>A beautiful tooltip...</b>">
   Hover Me
</p>

4. Initialize the tooltip plugin and done.

$('.demo').tooltip();

5. Change the default tooltip position:

$('.demo').tooltip({

  // 'right', 'bottom', 'left'
  position:'top'
  
});

6. Change the background color of your tooltips.

$('.demo').tooltip({

  backgroundColor: '#FF0097'
  
});

7. More configuration options.

$('.demo').tooltip({

  offset: 5, // in pixels
  parent: 'body' // parent element

});

---

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