Custom Animated Tooltip Plugin For jQuery - jquery.tooltip.js

File Size: 11.1 KB
Views Total: 1216
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Custom Animated Tooltip Plugin For jQuery - jquery.tooltip.js

Yet another tooltip library for jQuery that helps displays an CSS3 animated, customizable tooltip popups over any html elements. The plugin uses CSS3 transforms and transitions for the slide in / slide out animations.

How to use it:

1. Download the zip, add jQuery library together with the jquery.tooltip.js plugin's JS and CSS files to your webpage.

<link href="css/tooltip.css" rel="stylesheet">
<script src="//"></script>
<script src="js/jquery.tooltip.js"></script>

2. Add the essential CSS class 'tooltip' to the element and define the tooltip content in the data-content attribute.

<span class="tooltip tooltip-default" 
      data-content="Tooltip content here">

3. Call the plugin on the element where the tooltip should be attached to.


4. Change the default position of your tooltip.


  // right, left, bottom
  position: "" // default: top


5. Change the default background & label colors.


  contentBGColor: "",
  labelColor: ""


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