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äß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.
