Skapa snyggare tooltips med jQuery
2010-03-28 - jquery, javascript
0
Fick frågan hur jag gjorde mina tooltips här på sidan, till exempel dem man ser om man för musen över en av ikonerna i menyn. Jag använder givetvis jQuery och det är riktigt enkelt.
Tooltip-kod
 
		$(document).ready(function(){
 
			// Mouse tracking
			$().mousemove(function(e){
				mouseX = e.pageX;
				mouseY = e.pageY;
			});
 
			// Width of window
			var windowwidth = $(document.body).width();
 
			$(".tooltip").live("mouseover", function(e){
 
				// Basic setup
				tooltip_xOffset = -10;
				tooltip_yOffset = 0;	
 
				// Save our title element				
				this.t = this.title;
				if (this.t){
					$(this).attr("title", "");
					var text = this.t.split(":");  // Split into sub-parts if any.
 
					// Add tooltip object to body
					$("").attr("id", "tooltip").text(text[0]).appendTo("body");
 
					if (text[1]){
						// If there is a colon, add it to thenext line
						$("<span>").addClass("subline").text(text[1]).appendTo("#tooltip");
					}
 
					// Positioning code
					var width = $("#tooltip").width();
					var top = (e.pageY - tooltip_xOffset);
					var left = (e.pageX + tooltip_yOffset);
					if ((left + width) > windowwidth){
						left = windowwidth - (width + 20);
					}
					$("#tooltip").css("top", top + "px").css("left", left + "px").fadeIn("fast");
					return false;
				}
			});
 
			// Code for removing the tooltip
			$(".tooltip").live("mouseout", function(){
				$(this).attr("title", this.t);
				$("#tooltip").remove();
			});	
 
			// Let's track the mouse when the tooltip is shown
			$(".tooltip").mousemove(function(e){
				var width = $("#tooltip").width();
				var top = (e.pageY - tooltip_xOffset);
				var left = (e.pageX + tooltip_yOffset);
				if ((left + width) > windowwidth){
					left = windowwidth - (width + 20);
				}
				$("#tooltip").css("top", top + "px").css("left", left + "px");
			});			
		});
 
Koden ovan är det enda som behövs. Den tar hand om att visa, dölja och flytta på rutan när musen rör sig. Jag har kommenterar koden lite så det borde vara enkelt att förstå. Notera att jag använder "live"-metoden i jQuery för att se till att det fungerar även på nya element (som till exempel laddas via ajax). Om du använder ett kolon i title-attributet så blir tipset på två rader också. Här kan se hela koden, tillsammans med den CSS som behövs.
Mer i Tutorials
Vlj datumspann med jQuery
Rkna ungefrlig tid med PHP
CSSruta igen nu med skugga
Skapa snyggare tooltips med jQuery
Snyggare fdelsedagar i iCal och iPhoneiPod touch
Uppdaterad video Nya layoutmodulen
Reset display with AppleScript
Nyckelord: jquery eller javascript
Javascript library converts Flash to HTML5
Skapa snyggare tooltips med jQuery
Snygga till rubrikerna med jQuery
Fixa transparenta PNGbilder i Internet Explorer 6
jQuery
Två månader med Keto
Spelbord v3
Mechanical Age map
More shading and water
Första månaden med Keto
Keto
Fotosession: Tabitha
Utebelysning
Återvinningsskåp
Måla om huset
Byggt hylla till vintunnorna
Dodge RAM
Inline-redigering
Drömmen om ett spa
Dags för carport
Survey Island, what is happening?
Golvprov
Gillestugan uppdaterad!
Spelbord v2
Tre billyhyllor blir två
Gymkort
You can't take the sky from me
Högtalare klara!
eklundh.com tar ned skylten
Högtalare bestämda!
Uppgraderingar biorum
Lord of the Rings-maraton
Ergonomiskt som tusan!
Lego Storm Trooper
Fågel Fenix
Två hyllor på badrummet
Hobbyhörna fixad
Hylla bakom soffan
Modellbygge igen!
Porträtt av u/Flattie-Ratty
Porträtt av u/DangDoood
Buy prints of my maps
Hero Dashboard för Descent
3D-printer
Fältsjukhus 616
Ny kaffemaskin
Porträtt av u/elizabeeeef
Jämförelse 135 mm
Nya objektiv
Porträtt av kompis mamma
Använda utrymmet under trappen
Spelbord
Pimpning av köks-ön
Jag saknar min Dodge!
Acrylic drip