Nico Steiner - Frontend-Entwicklung und -Architektur

Montag, 24. November 2008

Tooltip unobtrusive mit JavaScript anzeigen

Die Aufgabe bestand darin, einen Tooltip-Effekt an ein Element mit einer bestimmten CSS-Klasse unobtrusive mit JavaScript zu binden.
Bekannt ist der Tooltip-Effekt vor allem bei semantisch ausgezeichneten Akronymen, die über ein entsprechendes title-Attribut ihre vollständige Schreibweise zugewiesen bekommen. Mit einer entsprechenden CSS-Regel werden diese Elemente so gestaltet, daß eine Hover-Eigenschaft erkennbar wird. Dies alles können moderne Browser nativ leisten.
Ich habe diese Idee dahingehend erweitert, daß (fast) beliebiges Markup in solch einen Tooltip gewandelt werden kann. Dabei werden Inline-Elemente mit bestimmten CSS-Klassen versehen, die per JavaScript in den Tooltip-Effekt überführt werden. Im Regelfall sieht das dann in etwa so aus:

<span class="tooltip">
  IDN-Domain
  <span class="tooltip-text">
    Eine <strong>Domain</strong>, welche die Verwendung von <strong>Umlauten</strong> zul&auml;&szlig;t.
  </span>
</span>

Mit Hilfe von JavaScript werden alle Elemente mit der Klasse tooltip-text immer dann an der Mauszeigerposition eingeblendet, wenn das sie umgebende Element gehovert wird.
Die JavaScript-Lösung basiert auf der YUI und reagiert auf verschiedene Events wie mouseover, mousemove und mouseout. Dabei wird das Tooltip-Element initial eingeblendet und positioniert, wird bei einer Mausbewegung neu positioniert und beim Verlassen des Elementes wieder ausgeblendet.
Der Vorteil im Vergleich zur Verwendung eines title-Attributes liegt wie bereits erwähnt in der Verwendung beliebigen Markups und einer gewissen Gestaltungsfreiheit durch den Einsatz von CSS.

Geschrieben von Nico Steiner in Referenzen um 23:42 | Kommentare (0) | Trackbacks (0)