Tooltipp-Bibliotheken

Tooltipps deluxe

Viele Web-Anwendungen nutzen Tooltipps, um die Bedienoberfläche für den Besucher verständlicher zu gestalten. Hört sich einfach an, ist es aber nicht immer. Die erste Wahl fällt natürlich meist auf das Title– oder Alt-Attribut der HTML-Elemente. Diese haben aber den Nachteil, dass sie nicht in allen Browsern zuverlässig arbeiten und auch nicht optisch angepasst oder formatiert werden können.

Aus diesem Grund existieren eine Menge an Tooltipp-Bibliotheken. Die meisten nutzen Javascript zur Anzeige und Steuerung der Tooltipps. Der Funktionsumfang reicht von einfachen Tooltipps bis hin zur universellen Fensterlösung, die die Tooltipp-Anzeige nebenbei mit erledigt.

Die ersten Schritte

Tooltipps deluxe

Die DOM-TT-Bibliothek konzentriert sich ganz auf die Aspekte zur Anzeige von Hinweisfenstern. Sie bietet dazu eine reiche Auswahl an Optionen und optischen Formatierungsmöglichkeiten. Zudem funktioniert die Bibliothek unter allen modernen Browsern. Dieser Artikel bezieht sich auf die Version 0.7.3 des Skripts. Die Download-Version der DOM-Tooltipps enthält einige Skriptdateien, die vor dem Einsatz auf der jeweiligen Webseite eingebunden werden müssen. Je nach verwendeten Features sind nicht alle Skriptdateien notwendig. Wer auf Nummer sicher gehen möchte, sollte alle fünf Skripts mit folgenden Zeilen im Head-Bereich der HTML-Seite einbinden:

Achten Sie dabei unbedingt auf die richtige Groß- und Kleinschreibung, damit die Tooltipps auch unter Unix-Systemen korrekt arbeiten.

Um ein Element mit Tooltipps zu versehen, ist nur wenig Arbeit vonnöten. Das passende HTML-Tag wird um einen Aufruf der DOM-Tooltipps im onMouseOver-Event-Handler erweitert. Den Rest übernimmt anschließend die Bibliothek:


Link

Der hier gezeigte Aufruf der Funktion domTT_acti
vate umfasst alle absolut notwendigen Parameter. Wichtig für die Anwendung ist lediglich der anzuzeigende Text, hier Internet Professionell.

Schaulaufen

Tooltipps deluxe

Natürlich wäre der Einsatz einer so ausgefeilten Bibliothek wenig sinnvoll, wenn nur einfache Hinweisfenster damit ausgegeben werden sollen. Denn DOM TT kann viel mehr. Eine Menge an Parametern steht zur Konfiguration zur Verfügung. Das Vorgehen zur Änderung der Parameter ist dabei immer das gleiche. Beim Aufruf der Funktion domTT_activate geben Sie diese als Übergabeparameter mit. Dabei werden der Name und Wert des Parameters jeweils getrennt übergeben, wie dies im vorangegangenen Beispiel mit dem Parameter content und dem Tooltipp-Inhalt (Internet Professionell) der Fall war. Das folgende Listing zeigt einige Varianten für den Einsatz der Tooltipps. Gezeigt werden Funktionen zum langsamen Einblenden des Hinweisfensters, der Transparenz und dem Setzen einer Titelzeile:


Titelzeile
Fading+Formatierung

Wie der folgende Quellcode-Ausschnitt zeigt, lassen sich auch Bilder und Formatierungen problemlos in den Tooltipps einsetzen:


');">Mit Bild

Fazit

Tooltipps deluxe

Die DOM-Tooltipps lassen kaum Wünsche offen. Der Funktionsumfang ist beträchtlich. Der Autor hat auch auf Kleinigkeiten Wert gelegt, so dass selbst Probleme wie die Überlappung von Auswahlfeldern mit dem Internet Explorer kein Hindernis sind. Zwar hat die Bibliothek noch nicht die Versionsnummer 1.0 erreicht, kann aber als äußerst stabil bezeichnet werden. Leider ist die Bibliothek nicht gerade leichtgewichtig. Wer auf eine schlanke Lösung angewiesen ist, sollte auf eine Bibliothek mit weniger Funktionen zurückgreifen.