Dynamic HTML5 Tooltip Plugin For jQuery - Tooltip.js
File Size: | 12.4 KB |
---|---|
Views Total: | 2203 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Tooltip.js is a simple, flexible, dynamic, highly customizable jQuery tooltip plugin which can be implemented via JavaScript or HTML5 'data' attribute.
More Features:
- Custom fade animation with delay.
- Light and dark themes.
- Custom text/shadow colors and font size/family.
- Allows to change the tooltip content dynamically.
- Also allows to display the tooltip without user interaction.
How to use it:
1. Load the stylesheet tooltip.css
and JavaScript file tooltip.js
in your webpage which has jQuery library loaded.
<link href="tooltip.css" rel="stylesheet" type="text/css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="tooltip.js"></script>
2. Attach the plugin to a specific element and set the tooltip content in the JavaScript.
<span id="demo-1">Hover Me</span>
$('#demo-1').tooltip({ text: 'This is a tip' });
3. You're also able to set the tooltip content in the data-tip
attribute as these:
<span id="demo-2" data-tip="This is the tooltip text">Hover Me</span>
ToolTip.init({ // Options here });
4. Customize your tooltips by overriding the following options during init.
ToolTip.init({ delay: 400, fadeDuration: 250, fontSize: '1.0em', theme: 'dark', // or light textColor: '#fff', shadowColor: '#000', fontFamily: 'Arial, Helvetica, sans-serif' });
5. Set the new tooltip content:
$('#demo-1').tooltip('setText', 'This is the new tooltip text');
6. Display the tooltip without user interaction.
$('#demo-1').tooltip('autoTip', { displayDuration: 5000, fadeOutDuration: 1000, onShowCallback: null, onHideCallback: null });
This awesome jQuery plugin is developed by ryanjairam. For more Advanced Usages, please check the demo page or visit the official website.