Return to Snippet

Revision: 37381
at December 9, 2010 06:24 by Meander365


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

Revision: 37380
at December 9, 2010 06:23 by Meander365


Initial Code
/**************************************************************/
		/* 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);
						});				
					}
				})
		  
		},
		
		/**************************************************************/
		/* simpletabs - assumes content is alread in DOM and tabs are represented in a list */	
		/**************************************************************/
		simpleTabs : function(options) {

			var defaults = {	
				selector: ".tabs"
			}; 
				
			var options = $.extend(defaults, options);  
			var content;			
			
			return $(options.selector).each(function() {  	
		
				var $tabparents = $(options.selector).children("li"),
					tablinks = $tabparents.children("a").get(),
					$selected = $tabparents.parent().find(".selected"),
					$initial_view = $selected.children("a").attr("href");

					for (i=0;i<tablinks.length;++i) { $($(tablinks[i]).attr("href")).hide(); }
					
					$($initial_view).show();
					
					$(tablinks).click(function(e) {
						e.preventDefault();
																
						if ($(this).parent().hasClass("selected")) return false;
						
						var showthis = $(this).attr("href");
						
						$tabparents.removeClass("selected");
						$(this).parent().addClass("selected");

						for (i=0;i<tablinks.length;i++) { $($(tablinks[i]).attr("href")).hide(); }
											
						$(showthis).show();		
					});
			});
		
		}

Initial URL
http://cssglobe.com/lab/easytooltip/01.html

Initial Description
Adapted so a delay can be applied on mouseleave.

Initial Title
Even Simpler Tooltip

Initial Tags
javascript, jquery

Initial Language
jQuery