Easy Tooltip Plugin for jQuery - tooltip.js

tooltip.js is a lightweight and mobile-friendly jQuery plugin that make it easier to add cool tooltips to any element of your page.

Features:

• Auto Position supported
• Delay, fade, fall back, html supported

Basic Usage:

1. Include jQuery library and tooltip.js

<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script> 
<script src='jquery.tooltip.js'></script> 

2. Markup

<a href="#" class="bottom" title="Bottom">Bottom</a>

3. Style your tooltips

.tooltip {
padding: 5px;
font-size: 11px;
opacity: 0.85;
filter: alpha(opacity=85);
background-repeat: no-repeat;
background-image: url(tooltip.gif);
}
.tooltip-inner {
padding: 5px 10px;
max-width: 200px;
pointer-events: none;
color: white;
text-align: center;
background-color: black;
border-radius: 3px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}
.tooltip-bottom {
background-position: top center;
}
.tooltip-top {
background-position: bottom center;
}
.tooltip-left {
background-position: right center;
}
.tooltip-right {
background-position: left center;
}

3. Call the plugin

<script>
     $('.bottom').tooltip({align: 'bottom'}); 
</script>

4. More Options

/* directions */
$('.top').tooltip({align: 'top'});
$('.right').tooltip({align: 'right'});
$('.bottom').tooltip({align: 'bottom'});
$('.left').tooltip({align: 'left'});
$('.autotop').tooltip({align: 'autoTop'});
$('.autoleft').tooltip({align: 'autoLeft'});

/* effects */
$('.fade').tooltip({
    // fade:true
    // or with custom options:
    fade: {
        duration: 200,
        opacity: 0.8,
        complete: function(hidden){
alert(hidden ? 'hidden' : 'visible');
        }
    }
});

/* attribute */
$('.attr').tooltip({attr: 'id'});

/* fallback */
$('.fallback').tooltip({fallback: 'It was set to nothing!'});

/* html */
$('.html').tooltip({html: true});

/* delay */
// you can use `false` to disable it completely (default) or
// `show` and `hide` separately for each.
$('.delay').tooltip({delay: {show: 150, hide:300}});

/* trigger */
var myTooltip = $('.trigger.show').tooltip({trigger: {}});
$('.trigger').click(function(){
    myTooltip.trigger('tooltip:'+ this.innerText);
    return false;
});

/* inputs */
$('input, select, textarea').tooltip({
    align: 'autoLeft',
    trigger: {
        show: 'focus',
        hide: 'blur'
    }
});

---

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