Basic HTML5 Tooltip Enhancement Plugin With jQuery - TooltyJS

TooltyJS is a very small and simple-to-use jQuery & HTML5 tooltip plugin used to enhance & beautify the default browser tooltips. Accepted directions are top, right, bottom, and left.

How to use it:

1. Put the required style sheet toolty.css in the header of the webpage.

<link href="src/toolty.css" rel="stylesheet">

2. The JavaScript file jquery.toolty.js must be loaded after jQuery library but before the </body> tag.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="src/jquery.toolty.js"></script>

3. Add the required 'tooltip' attribute to desired element where you want to display the tooltip on mouse hover and specify the content & position using the tooltip-* attributes:

<img src="1.jpg" tooltip 
     tooltip-direction="right" 
     tooltip-content="Tooltip Here">

4. Override & modify the default styles of the tooltip as you seen in the toolty.css file.

.tooltip {
  position: absolute;
  z-index: 999999;
  background: #333;
  color: #fff;
  font-size: 13px;
  height: 31px;
  border-radius: 5px;
  line-height: 31px;
  padding: 0 8px;
}

---

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