Create Custom Tooltips From Title Attribute - Tooltiper
File Size: | 772 KB |
---|---|
Views Total: | 672 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another jQuery tooltip plugin that generates custom tooltips from title attribute of any elements. Supports both plain text and HTML tooltip content.
More features:
- Follows cursor move.
- Configurable show/hide animations.
- Custom CSS styles.
- Lightweight and easy to implement.
How to use it:
1. To use the plugin include jQuery library and the Tooltiper plugin on the html page.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/tooltiper.js"></script>
2. Attach the plugin to the target element and define the tooltip content in the title
attribute. That's it.
<a href="#" title="Tooltiper jQuery Plugin"> Hover Me </a>
$(function(){ $("a").tooltiper(); });
3. To insert rich text into the tooltip, follow these steps.
<a href="#" title="<b>Tooltiper</b> jQuery Plugin"> Hover Me </a>
$(function(){ $("a").tooltiper({ tooltipType: 'html' }); });
4. Customize the animations when the tooltip appears/disappears.
$(function(){ $("a").tooltiper({ tooltipAppearenceMode: 'fadeIn', // jquery animations tooltipDisappearenceMode: 'fadeOut', ShowSpeed: 'fast', HideSpeed: 'fast' }); });
5. Make the tooltip always follow the cursor move.
$(function(){ $("a").tooltiper({ tooltipBound: 'cursor' }); });
6. Change the markup and styles of the tooltip.
$(function(){ $("a").tooltiper({ tooltipClass: 'js-tooltiper', tooltipOffset: 10, tooltipElement: 'span', tooltipCss: { // CSS rules here } }); });
This awesome jQuery plugin is developed by xcurveballx. For more Advanced Usages, please check the demo page or visit the official website.