JQuery tooltip

By sunslayer on Dec 16, 2010

basic JQuery tooltip plugin
example:

$(function(){
    $("span#tooltip").hover(function(){
        $(this).toolTip({text:"ToolTip example..."});
    },function(){
        $(this).toolTip("destroy");
    });
});

you can alter the CSS by including the properties along with the text, i.e.

{text:"ToolTip example...",css:{width:"100px"}}

its not as diverse as other tooltips but it serves the same purpose as most and is only 1kb when compiled

(function($){
    methods = {
        show: function(opts){
            c = $.extend({
                position:   "absolute",
                background: "#999",
                color:      "#333",
                width:      "auto",
                border:     "1px solid #666",
                borderWidth:    "thin 2px 2px thin"
            },opts.css);
            if (typeof opts.text=='object')
            {
                if(!opts.text.title)
                    return false;
                tt = 1;
                t = opts.text.title;
                opts.ut = opts.text;
                opts.text.title = null;
            }   else {
                    tt = 0;
                    t = opts.text;
            }
            this.data.toolTip = $.extend({id:"TTip"+Math.floor(Math.random()*10000),tx:t,t:tt},opts);
            $('<div id="'+this.data.toolTip.id+'">').text(t).css(c).appendTo('body');
            return $(this).bind('mousemove',methods.pos);
        },
        destroy: function(){
            $t = $(this).data.toolTip;
            if($t.text&&typeof $t.ut=='object')
                $t.ut.title = $t.tx;
            return $("#"+$t.id).remove().unbind('mousemove');
        },
        pos: function(e){
            ie = document.all?1:0;
            pX = ie?e.clientX+document.documentElement.scrollLeft:e.pageX;
            pY = ie?e.clientY+document.documentElement.scrollTop:e.pageY;
            return $("#"+$(this).data.toolTip.id).css({left: pX+"px",top: pY+10+"px"});
        }
    };
    $.fn.toolTip = function(method){return methods[method]?methods[method].apply(this,Array.prototype.slice.call(arguments,1)):methods.show.apply(this,arguments);}
})($);

Comments

Sign in to comment.
sunslayer   -  Dec 26, 2010

updated the code you can use the this keyword in place of the text to use the default text that would normally be displayed e.g.

<span id="tooltip" title="text here...">blah blah blah</span>

and use

$(function(){
    $("span#tooltip").hover(function(){
        $(this).toolTip({text:this});
    },function(){
        $(this).toolTip("destroy");
    });
});
 Respond  
Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.