Javascript ist Toll!

24. August 2005 - 10:22

Tooltip

Beschreibung

Tooltips sind die kleine gelben Kästchen, die angezeigt werden, wenn
der Mauszeiger über ein Elemente steht.
Am einfachsten lassen sich diese mit dem title Attribut umsetzen.
Jedes HTML Elemente läßt sich mit dieser Eigenschaft belegen:

Selbst über diesen em Tag Abschnitt wird der Title angezeigt

Aber manchmal wünscht man sich eine Formatierung des Kästchen, die läßt sich mit JS umsetzen. Dieses Tooltip Skript ist relativ simpel und läßt sich einfach in den HTML Code integrieren.
Das gewünschte Element muss lediglich als CSS Klasse tooltip erhalten und das Skript muss eingebunden werden. Der Text der im Tooltip erscheinen soll, wird im title Attribut eingetragen. Das sieht dann ungefähr so aus:

<a href="#" class="tooltip" title="TEST TEXT" >Tooltip</a>

Das Aussehen des Tooltip kann entweder im JS Code oder im CSS definiert werden.

var tt_styles            = new Object();
tt_styles.width          = '9em';
tt_styles.backgroundColor = '#ff0';
tt_styles.color           = '#000';
tt_styles.fontSize        = '1em';
tt_styles.padding         = '2px';
tt_styles.border          = '1px solid black';
...

Ausschnitt aus der tooltip.js Datei

Alternativ kann im CSS die ID des Tooltips verwendet werden um dieses zu gestalten.
Per default lautet die ID tooltip dies kann aber auch im Quellcode geändert werden.

Download:

tooltip.js ca. 4 KB

Beispiele

Tooltip 1

Tooltip 2

Browser