This time I will share jQuery Plugin and tutorial about Dynamic HTML5 Tooltip Plugin For jQuery – Tooltip.js, hope it will help you in programming stack.
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.
1 |
<link href="tooltip.css" rel="stylesheet" type="text/css"> |
2 |
<script src="//code.jquery.com/jquery.min.js"></script> |
3 |
<script src="tooltip.js"></script> |
2. Attach the plugin to a specific element and set the tooltip content in the JavaScript.
1 |
<span id="demo-1">Hover Me</span> |
3. You’re also able to set the tooltip content in the data-tip attribute as these:
1 |
<span id="demo-2" data-tip="This is the tooltip text">Hover Me</span> |
4. Customize your tooltips by overriding the following options during init.
8 |
fontFamily: 'Arial, Helvetica, sans-serif' |
5. Set the new tooltip content:
1 |
$('#demo-1').tooltip('setText', 'This is the new tooltip text'); |
6. Display the tooltip without user interaction.
1 |
$('#demo-1').tooltip('autoTip', { |
This awesome jQuery plugin is developed by ryanjairam. For more Advanced Usages, please check the demo page or visit the official website.
