25 Cool jQuery Tooltip Plugins for Interactive Designs

jQuery tooltip is certainly one of the building blocks you should consider using in your web design and development. jQuery tooltips are easy to install and set up and they help you offer extra information on important elements and at the same time make the browsing experience of every visitor interesting and dynamic. Simple and minimalistic design is good for user experience and usability and jQuery tooltips help you achieve this by allowing you to “not show it all” at once. There is a lot of jQuery tooltip scripts available and some are free and some premium. Check out the demos and documentation to make sure you find what suits your needs best.

In this article we are sharing with you jQuery tooltips that you can use in your website to make it look cool and interesting. These are all easy to download scripts and easy to use, if you have the required tweaking know-how.

http://www.tripwiremagazine.com/2011/11/jquery-tooltip-plugin.html

Tooltip.js

jQuery:
tip.init(object) #tooltip will be taken from object "helper" attribute
img src="..." helper="..."
tip.init('img[helper]')

var tip = {
init : function(e){
   $(e).bind("mouseenter", this.createTip);
   $(e).mouseleave(function(){$("#tip").remove()});
   $(e).click(function(){$("#tip").remove()});
   $(e).mousemove(function(e){$("#tip").css({left:e.pageX+30,
                                             top:e.pageY-16})});
},
createTip : function(e) {
    var obj=$(e.currentTarget),
        title=$.trim(obj.attr("helper"));
    if(title.length>0){        
       return $("#tip").length === 0 ?
          $("<div>").html("<span>"+$.trim(obj.attr("helper"))+"</span>").
                     attr("id","tip").
                     css({left:e.pageX+30,
                          top:e.pageY-16,
                          position:'absolute',
                          border:'1px solid #FFE222',
                          background:'#FFFBC2',
                          color:'#514721',
                          padding:'5px 10px',
                          textTransform:'lowercase',
                          fontVariant:'small-caps',
                          zIndex:9000}).
                     appendTo("body") : null;
        } else {return false}
    }
};

Prototype:
tip.createTip(container,object) #tooltip will be taken from object "title" attribute
<div id="container">
<img src="..." title="..." />
</div>
tip.createTip($('container'),'img[title]')

var tip = {
 title  : '',
 opacity: .8,
 marginX: 30,
 marginY: -46,
 position : function(i,e){
     return i.setStyle({left:e.clientX+this.marginX+'px',
                        top:e.clientY+this.marginY+'px'})
 },
 enter : function(i){
     var tip=this;
     $(i).observe(antHill.events.menter,function(e){
         var div,obj=$(e.currentTarget);
         tip.title=obj.readAttribute("title");
         obj.writeAttribute("title",'');
         if($("tip")===null){
             div=new Element('div',{id:'tip'});
             div.addClassName('tooltip').
                 setOpacity(tip.opacity).
                 innerHTML="<span>"+tip.title+"</span>";
             tip.position(div,e);
             $($$('body')[0]).insert({bottom:div});
         }
         Event.stop(e)}.bindAsEventListener($(i)));
 },
 leave : function(i){
     $(i).observe(antHill.events.mleave,function(e){
         $("tip").remove();
         $(i).writeAttribute("title",tip.title);
         Event.stop(e)}.bindAsEventListener($(i)));
 },
 move : function(i){
     $(i).observe(antHill.events.mmove,function(e){
         antHill.tip.position($("tip"),e);
         Event.stop(e)}.bindAsEventListener($(i)));
 },
 init : function(i){
     this.enter(i);
     this.leave(i);
     this.move(i);
 },
 createTip : function(c,i){c.select(i).
                             each(function(i){tip.init(i)})}
};