Custom Tooltip Follows Mouse Cursor - jQuery YACSSTooltip
File Size: | 30.7 KB |
---|---|
Views Total: | 3036 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Yet another jQuery tooltip plugin to create tooltip overlays using alt
or title
attributes that always follow the cursor on mouse move.
How to use it:
1. Insert the JavaScript file jquery.YACSSTooltip.min.js
after jQuery library before you close the body tag.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/src/jquery.YACSSTooltip.js"></script>
2. Define the tooltip content in the alt
or title
attributes.
<img alt="Tooltip Content Here" src="1.jpg" >
3. Attach the plugin to the img
tag and done.
$(function() { $('img').addTooltip(); });
4. Override the default tooltip styles in the CSS.
.YACSSTooltip { border: 1px solid #333; background-color: #161616; border-radius: 5px; padding: 5px 0; color: #fff; font-size: 12px Arial; max-width: 250px; line-break: auto; word-break: normal; word-spacing: 0px; white-space: normal; text-align: center; verflow-wrap: normal; }
Changelog:
2022-05-12
- Fixed a bug in a name that could create more than one base tooltip in the same page
2022-04-19
- Fix bug, tooltip was not unique.
2019-10-02
- Fix word-wrapping style for URLs or very long words in the tooltip
2019-09-20
- Fix word-break style for URLs or very long words in the tooltip
This awesome jQuery plugin is developed by jmalarcon. For more Advanced Usages, please check the demo page or visit the official website.