Minimal Custom Tooltip With Text Highlighting - jQuery Tooltip.js

Tooltips are used to interactively display additional information regarding an element on the page. The tooltip can contain an explanation, further details, images or anything that can help users understand the page better.

This is an extremely lightweight (less than 1kb) jQuery plugin that allows you to highlight any number of terms in your text and display a custom tooltip when the user hovers over them.

How to use it:

1. Include jQuery library and the jQuery.tooltip.js on the page.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.tooltip.js"></script>

2. Define the tooltip content in the title attribute:

<span class="hint" title="HyperText Markup Language">
  HTML
</span>

3. The plugin supports any inline element like a link:

<a href="#" title="This Is A Link">
  Hover Me
</a>

4. Initialize the tooltip plugin.

$(function(){
  $('a, .hint').tooltip();
});

5. Apply your own styles to the tooltip.

.tooltip{
  position: absolute;
  padding: 1rem;
  background: #222;
  color: #fff;
  border-radius: 5px;
  font: 1.25rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  display: none;
}

---

This awesome jQuery plugin is developed by shamilfrontend. For more Advanced Usages, please check the demo page or visit the official website.