Simple and Clean jQuery Tooltip Plugin - tips.js

tips.js is a lightweight and skinnable jQuery plugin to create multiple types of tooltips attached to any html elements, with a simple fade animation.

Basic Usage:

1. Include the required tips.css file in the head section of your page.

<link href="css/tips.css" media="screen" rel="stylesheet" type="text/css" />

2. Use the available tooltip classes to quickly create a styled tooltip. You can create your own styles in the tips.css. Set the content and direction of your tooltip via Html5 data-* attributes.

<a href="#" data-tooltip="Tooltip 1" data-tooltip-direction="left" class="hover"></a>
<a href="#" data-tooltip="Tooltip 2" data-tooltip-direction="right" class="error"></a>
<a href="#" data-tooltip="Tooltip 3" data-tooltip-direction="bottom" class="warning"></a>
<a href="#" data-tooltip="Tooltip 4" data-tooltip-direction="top" class="clicktips"></a>

3. Include jQuery javascript library and jQuery tip.js script at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/tips.js" type="text/javascript"></script> 

4. Initialize the plugin.

(function() {
$(function() {
$.tips({
action: 'focus',
element: '.error',
tooltipClass: 'error'
});
$.tips({
action: 'click',
element: '.clicktips',
tooltipClass: 'warning',
preventDefault: true
});
return $.tips({
action: 'hover',
element: '.hover',
preventDefault: true,
html5: false
});
});

}).call(this);

5. Available settings.

action: 'focus',
debug: false,
element: '.error',
fadeSpeed: 200,
html5: true,
removeAll: false,
removeSpecific: false,
preventDefault: false,
tailLength: 14,
tooltipClass: ''

Change log:

2015-10-02

• adding ability to remove tooltips

---

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