Simplest HTML5 Tooltip Plugin For jQuery - tooltipify

tooltipify is a dead simple to use jQuery plugin used for appending custom, hover-activated tooltip popups to any elements using HTML5 data-tooltip attribute.

How to use it:

1. Load the jQuery tooltipify plugin after jQuery library but before you close the body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="script/tooltipify.js"></script>

2. Create a place holder element for the tooltips.

<div class="tt"></div>

3. Insert your custom text content to the tooltip using HTML5 data-tooltip attribute.

<a href="#" data-tooltip="I'm a tooltip">Hover Me</a>

4. The required tooltip styles. Override and modify the CSS styles as shown below to create your own tooltip styles.

.tt {
  display: none;
  position: absolute;
  color: #FFF;
  text-align: center;
  padding: 10px;
  max-width: 200px;
  background-color: #000;
  border-radius: 3px;
}

.tt.visible { display: inline-block; }

.tt:after {
  content: '\25be';
  color: black;
  font-size: 18px;
  position: absolute;
  height: 10px;
  bottom: 0;
  left: 50%;
  margin-left: -5px;
}

---

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