Posted By

Meander365 on 12/09/10

Tagged

Versions (?)

Last Edited at 12/09/10 06:23am

Statistics

Viewed 691 times

Favorited by 1 user(s)

Related snippets

Even Simpler Tooltip

/ 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);
						});				
					}
				})
 
		}