Simple HTML5 Tooltip That Follows Cursor - jQuery light-tooltip
File Size: | 2.53 KB |
---|---|
Views Total: | 2599 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

light-tooltip is a dead simple jQuery based HTML5 tooltip plugin that always follows your cursor and is easy to customize using your own CSS styles.
How to use it:
1. Download and insert the script tooltip.js
into your document, after the latest jQuery library.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="tooltip.js"></script>
2. The plugin will append a tooltip to any DOM element using the data-tooltip
attribute.
<div class="container"> <button data-tooltip="This is a button">Button</button> <a data-tooltip="This is a link">Link</a> <img src="1.jpg" data-tooltip="This is an image"> ... </div>
3. Then apply your own CSS styles to the tooltip as these:
.div-tooltip { display: none; position: absolute; background-color: #000; padding: 10px; color: #fff; font-size: 12px 'Roboto'; border-radius: 5px; /* more styles here */ }
This awesome jQuery plugin is developed by GTLWEB. For more Advanced Usages, please check the demo page or visit the official website.