Skip to main content

Skapa snyggare
tooltips med jQuery

28 March 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
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 or 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
Nordic: The Musical
Livets träd
Ny kamera: Nikon Zf
Hemma Bäst
Garageuppfart för husbil: Massa grus!
Ljussablarna är klara!
Hemma Bäst
Garageuppfart för husbil: Lagt ut plattor och skyfflat makadam
Hemma Bäst
Garageuppfart för husbil: Grävt och klart!
Hemma Bäst
Pooltak
Nordic: The Musical
Valkyrior
Tekoppen
Kräftskiva och eldfest på Tekoppen!
Lord of the Rings timeline
Alien Timeline
Borta Bra
Snart är det Medeltidsveckan!
Hemma Bäst
Utebar: Pergola
Hemma Bäst
Utebar: Kylskåp och barstolar
Hemma Bäst
Utebar: Skåpdörrar
Nordic: The Musical
Lokes Vrede
Hemma Bäst
Garageuppfart för husbil: Garageuppfart för husbil!
Arkad- och flipperkabinett
Robotar
Nordic: The Musical
Blodsbröder
Nordic: The Musical
Midgård
Nordic: The Musical
Himlen brinner
Nordic: The Musical
Orosmoln i Asgård
Nordic: The Musical
Gudarnas spel
Nordic: The Musical
Oändlig kärlek
Ljussabel-projektet
Hemma Bäst
Skåp till Ute-TV
Thåström i Globen
Bröllopspresent
Födelsedagspresent
Borta Bra
Recension: Jacy's
Thåström
Nordic: The Musical
Kunskapens pris
Nordic: The Musical
Allting börjar alltid någonstans
Borta Bra
Recension: Bohusgården Hotell & Konferens
Borta Bra
Recension: Elite Palace
Nytt projekt på gång: Ljussablar som ljuskälla
Hemma Bäst
Hemmaspa: Hemma-Spa klart!
Alien: Romulus
Hemma Bäst
Utebar: Utebaren klar!
Hemma Bäst
Utebar: Börjar likna en bar!
Hemma Bäst
Utebar: Reglar på plats
Hemma Bäst
Utebar: Rivning pågår!
Mjölner!
Borta Bra
Örnen börjar bli redo för Sweden Rock
Hemma Bäst
Utebar: Utebar!
Mixtejp
Norrsken
Space Jockey
3D Settlers of Catan