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.
#inlineditbutton