Tiny Configurable Hover Tooltip Plugin For jQuery - Tooltip.js
File Size: | 17 KB |
---|---|
Views Total: | 807 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.