Simple HTML5 Tooltip That Follows Cursor - jQuery light-tooltip

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.

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.

  • Publication date: 23.04.2018
  • Source