Coole Tooltips

Gelesen bei AboutWebDesign.de
URL: http://www.aboutwebdesign.de/awd/content/1032014285.shtml

Tooltips sind das Mittel der Wahl, wenn es darum geht, bestimmte Zusatz-Informationen zu einem Thema anzuzeigen. Das Prinzip ist, dass der User ein Element mit der Maus berührt, woraufhin ein kleines Kästchen mit zugehörigem Text angezeigt wird. Eine gute Verwendungsmöglichkeit wäre beispielsweise ein Fachartikel, der viele den meisten Menschen wohl unbekannte Fachwörter verwendet. Die werden entsprechend markiert, und wenn sie mit dem Mauszeiger berührt werden, wird eine Definition angezeigt.

Automatisiert erzeugen


Die Seite GUIStuff hat einen entsprechenden Generator online gestellt. Auf der Generator-Site können Sie zunächst einige Parameter eingeben, wie z.B. die Textfarbe Ihrer Tooltips. Klicken Sie dann auf "Create" und binden Sie den erscheinenden Code in Ihre HTML-Seiten ein. Wenn Sie dort ein Tooltip anzeigen wollen, verwenden Sie diesen Code:
<a href="javascript:void(0)" onMouseover="EnterContent('ToolTip','Tooltip Titel','Tooltip Text'); Activate();" onMouseout="deActivate()">Zu mir wird ein Tooltip angezeigt</a>
Das erste Argument der EnterContent-Funktion darf nicht verändert werden.

Der generierte Code funktioniert übrigens mit neueren Internet Explorern und dem Netscape 4. Mozilla 1.0 jedoch zeigte in unseren Tests nichts an.

Tipps für gute Tooltips