Dynamic HTML5 Tooltip Plugin For jQuery - Tooltip.js

Tooltip.js is a simple, flexible, dynamic, highly customizable jQuery tooltip plugin which can be implemented via JavaScript or HTML5 'data' attribute.

More Features:

• Custom fade animation with delay.
• Light and dark themes.
• Custom text/shadow colors and font size/family.
• Allows to change the tooltip content dynamically.
• Also allows to display the tooltip without user interaction.

How to use it:

1. Load the stylesheet tooltip.css and JavaScript file tooltip.js in your webpage which has jQuery library loaded.

<link href="tooltip.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="tooltip.js"></script>

2. Attach the plugin to a specific element and set the tooltip content in the JavaScript.

<span id="demo-1">Hover Me</span>

$('#demo-1').tooltip({
  text: 'This is a tip'
});

3. You're also able to set the tooltip content in the data-tip attribute as these:

<span id="demo-2" data-tip="This is the tooltip text">Hover Me</span>

ToolTip.init({
  // Options here
});

4. Customize your tooltips by overriding the following options during init.

ToolTip.init({
  delay: 400,
  fadeDuration: 250,
  fontSize: '1.0em',
  theme: 'dark', //  or light
  textColor: '#fff',
  shadowColor: '#000',
  fontFamily: 'Arial, Helvetica, sans-serif'
});

5. Set the new tooltip content:

$('#demo-1').tooltip('setText', 'This is the new tooltip text');

6. Display the tooltip without user interaction.

$('#demo-1').tooltip('autoTip', {
  displayDuration: 5000,
  fadeOutDuration: 1000,
  onShowCallback: null,
  onHideCallback: null
});

---

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