Skapa snyggare tooltips med jQuery
2010-03-28 - jquery, javascript
0
pointer
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