Minimalist Element Tooltip Plugin With jQuery - tipIt

Just another jQuery/HTML5 tooltip plugin used to create custom, CSS3 animated and hover-triggered tooltips on the webpage. Accepted directions are top, right, bottom and left.

How to use it:

1. Include the stylesheet tipit.css in the head section, and the JavaScript tipit.js just before the closing body tag.

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

2. Append the tooltip to a specified element using data-tipit-content and data-tipit-placement attribute.

<div 
  data-tipit-content="Tooltip" 
  data-tipit-placement="bottom">
  Hove Me
</div>

2. Append the tooltip to a specified element using data-tipit-content and data-tipit-placement attribute.

• data-tipit-content: custom tooltip conent.
• data-tipit-placement: top, right, bottom or left (default).

<div 
  data-tipit-content="Tooltip" 
  data-tipit-placement="bottom">
  Hove Me
</div>

3. Show hide the tooltip manually.

$('div').showTipit();
$('div').hideTipit();

Changelog:

2019-01-22

• Updated to the latest version
• Added Vanilla JS version

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