Tiny Configurable Hover Tooltip Plugin For jQuery - Tooltip.js

Tooltip.js is a simple, fast and cross-browser jQuery plugin used to create custom hover-triggered tooltips where the text is extracted from title or data attribute, with configurable delay and position options.

How to use it:

1. Load the CSS file tooltip.css in the html page that will provide the default styles for your tooltips.

<link rel="stylesheet" href="tooltip.css">

2. Define the text displayed in the tooltip using either 'title' or 'data-title' attribute as follows.

<a href="#" title="I am a tooltip!">Hover me!</a>
<a href="#" data-title="I am a tooltip!">Hover me!</a>

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

$('a').tooltip();

4. Customize the delay and position.

$('a').tooltip({

  // 'left', 'right', 'below' or 'above'
  direction: "left",

  // in ms
  delay: 1000
  
});

5. Override the CSS rules in the tooltip.css to create your own tooltip styles.

.tooltip {
  position: absolute;
  z-index: 9001;
  background: #000;
  color: #FFF;
  padding: 3px 5px;
  max-width: 200px;
  cursor: default;
  line-height: 1.2;
}

---

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