Tooltipps mit jQuery

8. September 2008 um 08:37 Uhr von Daniel · Trackback-URL

Tooltipps kann man schön mit jQuery nachbauen und optisch aufwerten. Recht bekannt ist das PlugIn von Bassistance, mir war das allerdings mit seinen 3,5 KB einfach zu groß.

Wer es also schlank haben möchte, kann diesen Code von Bogdan Constantinescu verwenden.

$(document).ready(function ()
{
  tooltip();
});
 
function tooltip()
{
  $("img.tooltip").mouseover(    
    function (event) 
    { 
      var text = this.alt;
 
      // X- und Y-Koordinaten des Cursor ermitteln
      x = event.pageX+10;
      y = event.pageY+10;
 
      / ein DIV für den Tooltip erstellen
      $("body").append("<div id='tooltip'>"+text+"</div>");
 
      // das erstellte DIV mit CSS positionieren
      $("#tooltip").css("left", x).css("top", y);
    }
  );
 
  $("img.tooltip").mouseout(
    function (event)
    {
      // das DIV beim verlassen des Events entfernen
      $("#tooltip").remove();
    }
  );
}

Dabei wird ein DIV anhand der X- und Y-Koordinaten positioniert und eingeblendet. Sehr einfach, sehr schlank und doch mit voller Code-Kontrolle. Die Klasse des DIVs hätte man bei Bedarf auch noch in der Funktion mit übergeben können. Dann wäre es noch möglich mit einer Funktion verschiedene Tooltipps einzusetzen.