Skapa snyggare tooltips med jQuery

28 mars 2010 - jquery, javascript

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

Nyckelord: jquery eller javascript