Custom Tooltip Plugin Based On Hover Intent - hover.js

hover.js is a dead simple and easy to customize jQuery tooltip plugin for showing tooltip text when hovering on an element.

This plugin integrates with the jQuery hoverIntent plugin that provides an advanced handlerIn functionality to replace the jQuery hover() method.

How to use it:

1. Place jQuery library and the jQuery hover.js plugin in the HTML file.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.hover.js"></script>

2. Define the tooltip text in the data-hover attribute:

I Love <span data-hover="jQueryScript.Net">jQuery</span>

3. The example CSS styles for the tooltip. Feel free to override and modify the following CSS snippets to create your own styles.

.hover-text {
  display: inline-block;
  position: absolute;
  background: #ebeaee;
  border-radius: .4em;
  padding: 10px;
  font-size: .85em;
}

.hover-text:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: #ebeaee;
  border-bottom: 0;
  border-left: 0;
  margin-left: -10px;
  margin-bottom: -20px;
}

---

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