Kategorien

Archiv

  • [-]2010(15)
    • [-]November(1)
    • [-]Oktober(1)
    • [-]Juli(2)
    • [-]Juni(9)
    • [-]Mai(2)
jQuery
02.06.2010
21:52

jQuery-Tooltip mit voller Kontrolle über den Code

jQuery-Tooltips ohne viel Ballast, dafür einfach kontrollierbar.

Quelltext:  Alles auswählen  |  Zeilennummerierung an/aus
  1. jQuery(document).ready(function ()
  2. {
  3.   tooltip();
  4. });
  5.  
  6. function tooltip()
  7. {
  8.   jQuery("img.tooltip").mouseover(    
  9.     function (event)
  10.     {
  11.       var text = this.alt;
  12.  
  13.       // X- und Y-Koordinaten des Cursor ermitteln
  14.       x = event.pageX+10;
  15.       y = event.pageY+10;
  16.  
  17.       / ein DIV für den Tooltip erstellen
  18.       jQuery("body").append("<div id='tooltip'>"+text+"</div>");
  19.  
  20.       // das erstellte DIV mit CSS positionieren
  21.       jQuery("#tooltip").css("left", x).css("top", y);
  22.     }
  23.   );
  24.  
  25.   jQuery("img.tooltip").mouseout(
  26.     function (event)
  27.     {
  28.       // das DIV beim verlassen des Events entfernen
  29.       jQuery("#tooltip").remove();
  30.     }
  31.   );
  32. }
Abteilung für Gestaltung GmbH(kontakt@abteilung.ch)Gravatar: Abteilung für Gestaltung GmbHweiterleitenPermalinkTrackback-Link
Views: 589
  •  
  • 0 Kommentare
  •  

Mein Kommentar

Benachrichtige mich, wenn jemand einen Kommentar zu dieser Nachricht schreibt.

Zurück

« Juni 2010»
S M T W T F S
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30