English version English version English version
DHTML: Tooltips per JavaScriptHome DHTML-Bibliothek Vektorgrafik-Bibliothek Funktionsgraph-Plotter

JavaScript, DHTML
Tooltips
JavaScript Bibliothek zum Download.
Von Walter Zorn
 
DHTML: Tooltip per JavaScript  
Welche Browser?
 
Dokumentation
 
Download
 
E-Mail
 
Ein Tooltip ist ein kleines Informations-"Fensterchen", das am Mauszeiger erscheint, wenn er sich über einem bestimmten HTML-Element befindet. Dieses Tooltip JavaScript erzeugt Tooltips, die sich auf vielfältige Weise eigenen Wünschen anpassen lassen. Diese JavaScript Tooltips können sogar HTML enthalten wie beispielsweise Zeilenumbrüche oder Bilder usw. Die Einbindung des Tooltip JavaScript 's in die eigene Seite ist unkompliziert; zwei einfache Anpassungen in der HTML-Datei genügen, bis das erste Tooltip funktioniert (siehe Dokumentation).
 
 
 
Besonderheiten

Dieses Tooltips JavaScript funktioniert auch im Opera 5 und 6. Und nicht nur über Links, sondern auch anderen HTML-Elementen [1]. Die Einbindung des Tooltips JavaScript in die Seite ist trotzdem einfach. In die ausgewählten Tags muss nur jeweils ein onmouseover-Attribut eingefügt werden, das einen Funktionsaufruf mit dem gewünschten Text enthält; "onmouseout"s sind nicht nötig. Dann muss nur noch die JavaScript Datei in die HTML-Seite eingebunden werden - fertig. Mittels optionalen Kommandos in den "onmouseover"s lassen sich die Tooltips aber auch individuell gestalten (Demonstration und Dokumentation weiter unten).
 
 
 
Welche Browser?
Bis auf ein paar selten verwendete Exoten praktisch alle:
Linux:
Konqueror 3, Browser mit Gecko-Engine (Mozilla, Netscape 6, Galeon), Netscape 4 und 6, Opera 5 und 6.
 
Windows:
Netscape 4, Gecko-Browser, IE 4, 5.0, 5.5 und 6.0, Opera 5, 6, 7.
 
Andere Systeme:
Die Gegenstücke zu den oben erwähnten Browsern haben vollen Zugang.
 
 
 
 
Verwendung des Tooltip-Scripts
DHTML: Tooltips per JavaScript  
Seitenanfang
 
Welche Browser?
 
Dokumentation
 
Download
 
E-Mail
 
1. Bibliothek speichern
Die JavaScript-Datei downloaden und entzippen. Entweder im gleichen Verzeichnis wie die HTML-Datei als wz_tooltip.js speichern, oder den Pfad src="wz_tooltip.js" (siehe Punkt 2.) anpassen.
 
 
2. Bibliothek in die HTML-Datei einbinden
Folgende Zeilen innerhalb des <body>-Bereichs der HTML-Datei unmittelbar vor dem schließenden </body>-Tag einfügen:
<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>
 
 
3. Tooltip-Text in Link-Tags einfügen
Nun können Sie Tags wie in folgendem Beispiel Text zuweisen. Die Tags benötigen nur ein onmouseover-Attribut, das onmouseout-Attribut ist überflüssig:
<a href="index.htm" onmouseover="return escape('Irgendein Text')">Zur Startseite</a>

Wie man sieht, wird der Text dem Funktionsaufruf return escape() mitgegeben und muss in einfachen Anführungszeichen (Hochkommata) stehen. Umlaute/Sonderzeichen müssen unbedingt als HTML-Character-Entities (Sonderzeichenbeschreibungen) geschrieben werden. Andernfalls kommt es zu einem browserinternen Fehler, das Tooltip und alle nachfolgenden werden nicht dargestellt. Schreiben Sie also &auml; statt ä und &szlig; statt ß. Bei folgenden drei Zeichen bitte eine Besonderheit beachten: Schreiben Sie & amp; statt &amp; (das Zeichen, das auf dem Bildschirm als & erscheint), & lt; statt &lt; (erscheint als <) und & gt; statt &gt; (erscheint als >).
DHTML: Tooltips per JavaScript  
Seitenanfang
 
Welche Browser?
 
Dokumentation
 
Download
 
E-Mail
 
 
 
 
 
Weitergehende Gestaltung
4. Tooltip-Text mit HTML-Tags gestalten
Bitte beachten: Die Werte von Tag-Attributen dürfen nicht in doppelten Anführungszeichen stehen, sondern nur in einfachen Hochkommata, die mittels Backslash \ maskiert sein müssen. Beispiel:

Correct:
<a href="index.htm" onmouseover="return escape('Text mit <img src=\'bild.jpg\' width=\'60\'> Bild.')"> Zur Startseite</a>
 
Falsch:
<a href="index.htm" onmouseover="return escape('Text mit <img src="bild.jpg" width="60"> Bild.')"> Zur Startseite</a>

 
 
5. Variablen/Funktionsaufrufe als Tooltip-Inhalt
Statt eines Strings können Sie return escape() auch eine anderswo definierte Variable -
Beispiel: onmouseover="return escape(text1)"
- oder einen Funktionsaufruf -
Beispiel: onmouseover="return escape(holeText())"
- mitgeben. Variablen oder Funktionen werden am besten in einer separaten JS-Datei oder in einem <script>-Block im <head>-Bereich definiert und machen es beipielsweise bequemer, für mehrere Tooltips ein und denselben längeren Tooltip-Text zu verwenden. Auch die unter Punkt 3 und 4 erwähnten Besonderheiten mit Anführungszeichen und Sonderzeichen innerhalb des Tooltip-Texts müssen nicht beachtet werden. So ist es auch unkritischer, Tooltip-Inhalte einzubinden, die serverseitig per Script erzeugt werden.
DHTML: Tooltips per JavaScript  
Seitenanfang
 
Welche Browser?
 
Dokumentation
 
Download
 
E-Mail
 
 
 
6. Tooltips mittels Kommandos gestalten
Das Standardaussehen der Tooltips ist in wz_tooltip.js voreingestellt. Der dafür zuständige Bereich ist mit "GLOBAL TOOLTIP CONFIGURATION" überschrieben. Globale (für alle Tooltips gültige) Änderungen sollten Sie dort vornehmen. Das Aussehen und Verhalten einzelner Tooltips lässt sich mit Kommandos ändern. Diese Kommandos überschreiben die globale Konfiguration und werden dem onmouseover des jeweiligen HTML-Tags mitgegeben:

Kommando Effekt Beispiel
this.T_ABOVE Dieses Kommando erzwingt permanente Positionierung oberhalb des Mauszeigers. Wert: true
 
In Kombination mit dem this.T_OFFSETY-Kommando lässt sich der vertikale Abstand vom Mauszeiger einstellen. 		this.T_ABOVE = true;
this.T_BGCOLOR Hintergrundfarbe des Tooltips. Wert muss in Hochkommata stehen this.T_BGCOLOR='#d3e3f6';
this.T_BGIMG Hintergrundbild für das Tooltip. Pfadangabe muss in Hochkommata stehen. this.T_BGIMG='images/myBgImg.jpg';
this.T_BORDERWIDTH Randdicke. Auf 0 setzen, wenn der Rand unsichtbar gemacht werden soll. this.T_BORDERWIDTH=3;
this.T_BORDERCOLOR Randfarbe. Wert muss in Hochkommata stehen this.T_BORDERCOLOR='#336699';
this.T_DELAY Tooltip erscheint mit Verzögerung, wie man es von betriebssystem-basierten Tooltips kennt. Angabe in Millisekunden. this.T_DELAY=1000;
this.T_FIX Positioniert das Tooltip an den Koordinaten, die in den eckigen Klammern vorgegeben sind. Nützlich insbesondere in Kombination mit dem this.T_STICKY-Kommando. this.T_FIX = [200, 2500];
this.T_FONTCOLOR Schriftfarbe. Wert muss in Hochkommata stehen this.T_FONTCOLOR='#993399';
this.T_FONTFACE Schriftart. Angabe muss in Hochkommata stehen this.T_FONTFACE='verdana,geneva,sans-serif';
this.T_FONTSIZE Schriftgröße + Einheit (Einheit zwingend erforderlich). Angabe muss in Hochkommata stehen this.T_FONTSIZE='13px';
this.T_FONTWEIGHT Schriftstärke. Mögliche Werte: 'normal' und 'bold' this.T_FONTWEIGHT='bold';
this.T_LEFT Positioniert das Tooltip links vom Mauszeiger. Wert: true
 
this.T_ABOVE=true;this.T_LEFT=true; 		this.T_LEFT = true;
this.T_OFFSETX waagrechter Versatz gegenüber dem Mauszeiger.
 
Geben Sie die halbe Tooltip-Breite als negativen Wert an, um das Tooltip unter dem Mauszeiger zu zentrieren (die Breiten-Voreinstellung in wz_tooltip.js ist 300). 		this.T_OFFSETX=32;
this.T_OFFSETY senkrechter Versatz gegenüber dem Mauszeiger this.T_OFFSETY=32;
this.T_PADDING Innenabstand zwischen Rand und Text this.T_PADDING=5;
this.T_SHADOWCOLOR Erzeugt Schatten in der angegebenen Farbe. Wert in Hochkommata. Die Schattenweite wird automatisch zu 3 (Pixel) berechnet, falls sie nicht in wz_tooltip.js global voreingestellt ist und das Tag kein this.T_SHADOWWIDTH - Kommando enthält. Um einen Schatten zu erzeugen, genügt es also, entweder die Farbe oder die Weite anzugeben. this.T_SHADOWCOLOR='#ccaacc';
this.T_SHADOWWIDTH Erzeugt Schatten mit der angegebenen Weite. Die Schattenfarbe wird automatisch zu '#cccccc' (helles Grau) berechnet, falls es kein this.T_SHADOWCOLOR -Kommando für dieses Tooltip und keine globale Voreinstellung in wz_tooltip.js gibt. this.T_SHADOWWIDTH=6;
this.T_STATIC Das Tooltip folgt nicht den Bewegungen des Mauszeigers und verhält sich damit ähnlich wie betriebssystem-basierte Tooltips. Wert: true this.T_STATIC=true;
this.T_STICKY Das Tooltip bleibt so lange stehen, bis ein anderes aktiviert wird oder bis der Anwender auf das Dokument klickt. Wert: true this.T_STICKY=true;
this.T_TITLE Titel. Text muss in Hochkommata stehen. Der Hintergrund wird automatisch in der selben Farbe wie der Rand dargestellt. this.T_TITLE='Eine &Uuml;berschrift';
this.T_TITLECOLOR Farbe des Titeltextes. In wz_tooltip.js voreingestellt ist '#ffffff' (weiß). this.T_TITLECOLOR='#ff6666';
this.T_WIDTH setzt Breite des Tooltips this.T_WIDTH=200;
Beispiel für die Verwendung von Kommandos:
<a href="index.htm" onmouseover="this.T_WIDTH=200;this.T_FONTCOLOR='#003399';return escape('Blabla')"> Zur Startseite</a>

 
Wie das Beispiel zeigt, müssen die Kommandos vor dem Funktionsaufruf return escape() eingefügt werden, der den Tooltiptext enthält. Jedes Kommando muss mit einem Semikolon abgeschlossen werden.
 
 
 
 
 
Download
DHTML: Tooltips per JavaScript  
Seitenanfang
 
Welche Browser?
 
Dokumentation
 
Download
 
E-Mail
 
wz_tooltip.js   3.24     gezippt 5.27 KB
wz_tooltip.zip
 
 
 
 
 
Fußnoten
[1]
Der Netscape 4 interpretiert onmouseover-Attribute nur in <a>- und <layer>-Tags. Die onmouseover-Funktionalität lässt sich aber für andere Tags simulieren, indem diese Tags entweder intern ein verschachteltes <ilayer><layer>-Paar erhalten oder in ein solches eingeschlossen werden. Das onmouseover-Attribut muss dann redundant im <layer>-Tag gesetzt werden.
 
 
 
Walter Zorn, München, 2003
 
 
 
 
 
 
 
 
 
 
visitors on www.walterzorn.com since 27. 12. 2002