This time I will share jQuery Plugin and tutorial about Basic HTML5 Tooltip Enhancement Plugin With jQuery – TooltyJS, hope it will help you in programming stack.
TooltyJS is a very small and simple-to-use jQuery & HTML5 tooltip plugin used to enhance & beautify the default browser tooltips. Accepted directions are top, right, bottom, and left.
How to use it:
1. Put the required style sheet toolty.css in the header of the webpage.
1 |
<link href="src/toolty.css" rel="stylesheet"> |
2. The JavaScript file jquery.toolty.js must be loaded after jQuery library but before the </body> tag.
1 |
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> |
2 |
<script src="src/jquery.toolty.js"></script> |
3. Add the required ‘tooltip’ attribute to desired element where you want to display the tooltip on mouse hover and specify the content & position using the tooltip-* attributes:
1 |
<img src="1.jpg" tooltip |
2 |
tooltip-direction="right" |
4. Override & modify the default styles of the tooltip as you seen in the toolty.css file.
This awesome jQuery plugin is developed by Eklopsis. For more Advanced Usages, please check the demo page or visit the official website.
