Tooltips per JavaScript / DHTML

English version

Home

DHTML-Bibliothek

Vektorgrafik-Bibliothek

Funktionsgraph-Plotter

JavaScript, DHTML
Tooltips
JavaScript Bibliothek zum Download.
Entwickler: Walter Zorn

Dies ist nicht die aktuelle Version des Tooltip-Scripts. Diese Seite wird nicht mehr gewartet. Hier geht's zur Dokumentation und zum Download der aktuellen Version. Anmerkung: Diese Seite hier ist nur für Leute gedacht, die noch eine alte Version (älter als v.4.0) von wz_tooltip.js verwenden und wegen der geänderten Syntaxregeln nicht auf die aktuelle Version upgraden wollen.

Welche Browser?

Dokumentation

Download

E-Mail

Dieses Tooltip-JavaScript erzeugt Tooltips, kleine Informations-Fensterchen, die über bestimmten HTML-Elementen am Mauszeiger erscheinen. Bei Bedarf kann ein solches von wz_tooltip.js erzeugtes Tooltip auf vielfältige Weise konfiguriert werden (Farbe, Schrift, Rand, Schatten, verzögertes Erscheinen, nur begrenzte Zeit sichtbar, u.v.m.). Die JavaScript Tooltips können einfachen Text, aber auch HTML enthalten wie beispielsweise Zeilenumbrüche, Tabellen oder Bilder. Das Tooltip JavaScript lässt sich unkompliziert in die Seite einbinden; zwei einfache Anpassungen in der HTML-Datei genügen, bis das erste Tooltip funktioniert (siehe Dokumentation).

Besonderheiten

Bild mit JavaScript Tooltip (Info-Fensterchen)

Dieses Tooltips JavaScript funktioniert auch im Opera 5 und 6. Und nicht nur über Links, sondern auch anderen HTML-Elementen [1]. In die betreffenden Tags muss lediglich ein onmouseover-Attribut mit einem Funktionsaufruf und dem gewünschten Tooltip -Text eingefügt werden. Onmouseout-Attribute sind nicht erforderlich. Dann muss nur noch die JavaScript Datei in die HTML-Seite eingebunden werden. Mittels optionalen Kommandos in den onmouseover-Attributen lassen sich die Tooltips aber auch individuell gestalten (Demonstration und Dokumentation weiter unten).

Welche Browser?

Bis auf ein paar selten verwendete Exoten alle:
Linux:
Konqueror 3, Browser mit Gecko-Engine (Mozilla, Netscape 6, Galeon), Netscape 4 und 6, Opera 5+.

Windows:
Netscape 4, Gecko-Browser, IE 4, 5.0, 5.5 und 6.0, Opera 5+.

Andere Systeme:
Mac Safari. Die Gegenstücke zu den oben erwähnten Browsern haben ebenfalls vollen Zugang.

Verwendung des Tooltip-Scripts

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 einfügen, und zwar nach dem letzten HTML-Tag, das ein Tooltip enthält, am besten unmittelbar vor dem schließenden </body>-Tag:

<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>

3. Tooltip-Text in Tags einfügen
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 ä statt ä und ß statt ß. Bei folgenden drei Zeichen bitte eine Besonderheit beachten: Schreiben Sie & amp; statt & (das Zeichen, das auf dem Bildschirm als & erscheint), & lt; statt < (erscheint als <) und & gt; statt > (erscheint als >).

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:

Richtig:
<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.

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_CLICKCLOSE`	Wert: true Schließt das Tooltip, wenn irgendwohin (Tooltip oder Dokument) geklickt wurde. Wirkt sich natürlich nur auf Tooltips mit dem this.T_STICKY-Kommando aus, also nur auf solche, die sich nicht schließen, wenn die Maus das betreffende HTML-Element verlässt.	`this.T_CLICKCLOSE = true;`
`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_OPACITY`	Transparenz des Tooltips. Opazität ist das Gegenteil von Transparenz. Der Wert muss eine Ganzzahl zwischen 0 (vollständig transparent, unsichtbar) und 100 (komplett undurchsichtig) sein. `Weiters Beispiel` mit Bild (aufgenommen auf meiner 9000-Kilometer- / 5500-Meilen-Liegeradtour Hamburg-Nordkapp-München), Schatten via this.T_SHADOWWIDTH, horizontal zentriertem Inhalt via this.T_TEXTALIGN und Hintergrundbild via this.T_BGIMG.	`this.T_OPACITY=80;`
`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 auf 5 (Pixel) gesetzt, 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 auf '#c0c0c0' (helles Grau) gesetzt, falls es kein this.T_SHADOWCOLOR -Kommando für dieses Tooltip und keine globale Voreinstellung in wz_tooltip.js gibt.	`this.T_SHADOWWIDTH=8;`
`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 verändert seine Position nicht und bleibt sichtbar, bis ein anderes aktiviert wird. Wert: true. Soll das Tooltip in jedem Fall nach einer bestimmten Zeitspanne verschwinden, können Sie das `this.T_TEMP` -Kommando anwenden.	`this.T_STICKY=true;`
`this.T_TEMP`	Gibt eine Zeitspanne >0 in Millisekunden vor, nach der das Tooltip in jedem Fall verschwindet, auch wenn sich der Mauszeiger noch über dem betreffenden HTML-Element befindet oder wenn das `this.T_STICKY` -Kommando angewendet wurde. Werte <=0 machen das Kommando wirkungslos, bedeuten also die voreingestellte Zeitspanne "Unendlich".	`this.T_TEMP=3500;`
`this.T_TEXTALIGN`	Richtet den Tooltip-Text und, falls vorhanden, auch den Titeltext aus. Der Wert muss in Hochkommata (einfache Anführungszeichen, Apostrophe) eingeschlossen sein und kann 'right', `'justify'` oder 'left' sein. Der Wert 'left' ist voreingestellt und deshalb überflüssig.	`this.T_TEXTALIGN='right';`
`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 Ü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.

Mehrere Javascript-Funktionen in einem Onmouseover?
Weitere onmouseover -Aktionen, die Sie mit dem selben HTML-Element verknüpfen möchten, beispielsweise eine Bildaustausch-Funktion, müssen Sie in einem anderen, verschachtelten HTML-Tag unterbringen. Beispiel:

<a href="page.htm" onmouseover="return escape('Tooltip Text')"> <span onmouseover="TauscheBild(...)">Link</span> </a>

Tooltips auf Imagemaps anwenden
Weisen Sie die Tooltips den <area>-Tags zu. Beispiel:

<map name="myMap"> <area onmouseover="return escape('Dies ist Area 1')" shape=... > <area onmouseover="return escape('Dies ist Area 2')" shape=... > </map> <img usemap="#myMap" src="myImage.jpg" alt="...">

Download

Seitenanfang

Welche Browser?

Dokumentation

Download

E-Mail

wz_tooltip.js 3.45 gezippt 6.21 KB
wz_tooltip.zip

history.txt (Changelog of wz_tooltip.js)

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, 2005