Skip to main content

Skapa snyggare tooltips med jQuery

28 Mar 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
Ostkupa
Stranger Things, säsong 5
Första december!
Nordic: The Musical
Livets träd
Myst Book
Web versions of the journals
Predator: Badlands
Myst Book
Selenitic Age
Ny kamera, gammal glöd
Tekoppen
Årets Halloweenfest var mycket lyckad!
Porträtt av t-o-m-u-s-a
Porträtt av u/arielgirle
Profilporträtt
GameConnect
Ny PC!
50 år
Hemma Bäst
Garageuppfart för husbil: Uppfarten är klar!
Ny kamera: Nikon Zf
Hemma Bäst
Garageuppfart för husbil: Massa grus!
The lightsabers are done!
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: Refrigerator and bar stools
Hemma Bäst
Utebar: Cupboard doors
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
Update on the lightsaber project
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