/ Published in: jQuery
Adapted so a delay can be applied on mouseleave.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/**************************************************************/ /* simple tooltip */ /**************************************************************/ tooltip : function(options){ var defaults = { selector: ".tooltip", xOffset: -10, yOffset: -25, tooltipWrapper: "#tooltip", clickRemove: false, content: "", useElement: "", delay: 400 }; var options = $.extend(defaults, options); var content; return $(options.selector).each(function() { var title = $(this).attr("title"); $(this).hover(function(e){ content = (options.content != "") ? options.content : title; content = (options.useElement != "") ? $("#" + options.useElement).html() : content; $(this).attr("title",""); if (content != "" && content != undefined){ if ( $(options.tooltipWrapper).length ) { $(options.tooltipWrapper).remove(); } $("body").append("<div id='"+ options.tooltipWrapper.replace("#","") +"'>"+ content +"</div>"); $(options.tooltipWrapper) .css("position","absolute") .css("top",(e.pageY - options.yOffset) + "px") .css("left",(e.pageX + options.xOffset) + "px") .css("display","none") .fadeIn("fast") } }, function(){ $(options.tooltipWrapper).fadeOut(options.delay,function() { $(this).remove(); }); $(this).attr("title",title); }); $(this).mousemove(function(e){ $(options.tooltipWrapper) .css("top",(e.pageY - options.yOffset) + "px") .css("left",(e.pageX + options.xOffset) + "px") }); if(options.clickRemove){ $(this).mousedown(function(e){ $(options.tooltipWrapper).remove(); $(this).attr("title",title); }); } }) }
URL: http://cssglobe.com/lab/easytooltip/01.html