Simple HTML5 Tooltip That Follows Cursor - jQuery light-tooltip

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

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="" 
<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">

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.