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


JavaScript, DHTML
Tooltips

JavaScript Bibliothek zum Download.

Entwickler: Walter Zorn
 
DHTML: Tooltip per JavaScript  
Kurzbeschreibung
 
Cross-Browser
 
Dokumentation
 
Erweiterungen
 
Download
 
Dieses Tooltip-JavaScript erzeugt Tooltips, kleine Informations-Boxen über HTML-Elementen. Die Verwendung dieses Tooltip-Scripts ist sehr einfach.
 
Kurzbeschreibung
Die Breite dieser JavaScript-Tooltips passt sich automatisch an den Inhalt an. Natürlich können Sie auch eine feste Tooltip-Breite vorgeben. Die Tooltips können einfachen Text enthalten, aber auch HTML, zum Beispiel Bilder, Zeilen- Umbrüche, Tabellen, Listen etc.. Bild mit JavaScript-Tooltip Das Aussehen und Verhalten eines solchen mit wz_tooltip.js erzeugten Tooltips können Sie auf vielfältige Weise konfigurieren. Die Standard-Einstellungen für alle Tooltips können in der JavaScript-Datei selbst geändert werden (Abschnitt GLOBAL TOOLTIP CONFIGURATION). Mit Kommandos lassen sich Tooltips individuell konfigurieren.
 
Darüberhinaus gibt es Erweiterungen (Plugins) (oder schreiben Sie sich Ihre eigenen!) mit weiteren Optionen zum Konfigurieren der Tooltips. Für ein Ballon-Tooltip wie dieses müssen Sie nur das JavaScript-Plugin "tip_balloon.js" in Ihre Seite einbinden und dann das BALLOON-Kommando auf das Tooltip anwenden.
 
Als weitere Besonderheit kann diese Tooltip-DHTML-Bibliothek beliebige HTML-Elemente dynamisch in Tooltips verwandeln. Da solche HTML-Seiteninhalte im Gegensatz zu JavaScript-Strings suchmaschinen-relevant sind, können Sie also wirklich wichtige Inhalte in Tooltips verpacken. Siehe Dokumentation.
 
 
 
Cross-Browser

Das Tooltip-Script unterstützt alle Browser bis auf ein paar selten verwendete Exoten und Uralt-Browser (NN 4, Opera 5/6), die kein Mensch mehr benutzt. Unterstützte Browser: Gecko-Browser (Firefox, Mozilla, Netscape 6+, Galeon und andere), IE 5+, Opera 7+, Konqueror, Safari, und alle Browser, die einigermaßen dem W3C-Standard folgen.
 
Im Opera-Browser unterdrückt dieses Tooltip-JavaScript die betriebssystem-basierten Tooltips, die normalerweise über Links erscheinen würden. Diese browsereigenen Tooltips würden natürlich auch DHTML-Inhalte verdecken und deshalb so aussehen.

 
 
 
 
Verwendung des Tooltip-Scripts

1. Bibliothek herunterladen
Die JavaScript-Datei downloaden und entzippen.
DHTML: Tooltips per JavaScript  
Seitenanfang
 
Kurzbeschreibung
 
Cross-Browser
 
Dokumentation
 
Erweiterungen
 
Download
 
 
 
2. In die HTML-Datei einbinden

Folgende Zeilen innerhalb des BODY-Bereichs, am besten unmittelbar nach dem öffnenden <body>-Tag einfügen:
<script type="text/javascript" src="wz_tooltip.js"></script>
Gegebenenfalls muss der Pfad src="wz_tooltip.js" zur JavaScript-Datei angepasst werden.
Einbinden am Anfang des BODY-Bereichs stellt sicher, dass die Tooltips nahezu sofort funktionieren, lange bevor der Ladevorgang der Seite abgeschlossen ist.  
 
3. Tooltips in HTML-Tags definieren

Die Tags benötigen je ein onmouseover- und ein onmouseout-Attribut:

<a href="index.htm" onmouseover="Tip('Some text')" onmouseout="UnTip()">Homepage </a>

Das ist alles. Kein title-Attribut, kein Container-DIV.
 
Wie man sieht, wird der Text dem Funktionsaufruf Tip() mitgegeben und steht in einfachen Anführungszeichen (Apostrophen, Hochkommata). Achtung: Apostrophe innerhalb des Tooltip-Textes müssen deshalb mit Backslashes maskiert werden. Beispiel:
Tip('Mit Hans\' Freundin auf dem Ku\'damm.')
 
Der Aufruf von UnTip() im onmouseout-Eventhandler macht das Tooltip wieder unsichtbar.
 
Sie können natürlich auch andere Eventhandler für Tip() und/oder UnTip() verwenden.


 
 
4. Funktioniert nicht?
Dann funktioniert (hoffentlich) alles. Wenn nicht:
a) Das (ggf. serverseitig generierte) HTML und das CSS der Seite überprüfen, am besten mit dem W3C-Online-Validator unter http://validator.w3.org/.
b) Überprüfen, ob die Schritte 1 bis 3 zur Einbindung des Scripts und ggf. auch alle Punkte unter "Weitergehende Gestaltung", siehe unten, befolgt wurden (mit Abstand häufigste Fehlerursache).
c) Die JavaScript-Fehlerkonsole Ihres Browsers konsultieren. Eine JavaScript-Fehlermeldung beruht praktisch immer auf fehlerhafter Einbindung des Scripts, oder auf Syntax- oder Logikfehlern in eigenen Scriptzeilen.
d) Und, bitte behaupten Sie nicht, Sie hätten einen Bug gefunden - außer Sie haben alles sehr sorgfältig überprüft und sind sich ganz sicher. Bitte haben Sie Verständnis, dass ich lieber Code entwickeln als fremde Seiten debuggen möchte. Feedback ist natürlich willkommen!

 
 
 
 
Weitergehende Gestaltung

5. Alternative: HTML-Element in Tooltip verwandeln
Dazu brauchen Sie im onmouseover-Attribut nur die ID des betreffenden HTML-Elements anzugeben, z.B. eines SPAN-Tags. Vorteile:
  • HTML-Seiteninhalte sind im Gegensatz zu JavaScript-Strings suchmaschinen-relevant. Es spricht also nichts dagegen, wirklich wichtige Inhalte in Tooltips zu verpacken.
  • Insbesondere bei geschickter Platzierung sind die HTML-Elemente auch für Besucher sichtbar, die JavaScript deaktiviert haben.
  • Optional kann das HTML-Element, aus dem das Tooltip erzeugt wird, sogar sichtbar bleiben, zum Beispiel, um irgendetwas nochmals an einer anderen Stelle der Seite in einem Tooltip zu zeigen.
  • Direkt im HTML der Seite kann komplexes inneres HTML für das Tooltip einfacher definiert werden als in einem JavaScript-String.

 
Um ein Tooltip aus einem HTML-Element zu erzeugen, müssen Sie nur die ID des HTML-Tags an die Funktion TagToTip() übergeben:

<a href="index.htm" onmouseover="TagToTip('Span2')" onmouseout="UnTip()">Startseite </a>
...
<span id="Span2">Irgendein Kommentar<br>zur Startseite</span>
...

In diesem Beispiel zeigt das Tooltip über dem Link den Inhalt des SPAN-Elements an. Beachten Sie, dass nur der Inhalt mitsamt dem <br>-Tag übernommen wird, aber weder das Tag selbst (hier das SPAN-Element) noch CSS-Formatierungen, die auf dieses Tag angewendet wurden.
 
Normalerweise macht das Tooltip-Script Elemente, die in Tooltips verwandelt werden (im Beispiel das SPAN-Element), automatisch beim Laden der Seite unsichtbar. Sie können dieses automatische Verbergen deaktivieren, indem Sie die Konfigurationsvariable TagsToTip im globalen Konfigurationsabschnitt von in wz_tooltip.js auf false setzen (Voreinstellung: true). Dann müssen Sie sich ggf. aber selbst darum kümmern, solche HTML-Elemente zu verbergen, indem Sie deren CSS-Eigenschaft 'display' auf 'none' setzen.
 
Anmerkung: Insbesondere im IE profitiert die Webseiten-Ladegeschwindigkeit deutlich, wenn Sie das automatische Verbergen deaktivieren.
DHTML: Tooltips per JavaScript  
Seitenanfang
 
Kurzbeschreibung
 
Cross-Browser
 
Dokumentation
 
Erweiterungen
 
Download
 
 
 
6. HTML im Tooltip-Text

Für Bilder innerhalb von Tooltips müssen unbedingt die width- und height-Attribute in den <img>-Tags angegeben werden; andernfalls kann die Größe der Tooltips nicht richtig berechnet werden.
 
Doppelte Anführungszeichen (") innerhalb des Tooltip-Textes müssen als HTML-Entity &quot; geschrieben werden, da Anführungszeichen bereits als Begrenzer für das onmouseover-Attribut vergeben sind. Apostrophe (einfache Anführungszeichen) müssen mit einem vorangestellten Backslash maskiert werden, da Apostrophe bereits als Begrenzer für den Tooltip-Text dienen. Als Begrenzer für HTML-Tag-Attribute innerhalb des Tooltiptexts können Sie entweder &quot; oder \'  benutzen. Beispiel:

Richtig:
<a href="index.htm" onmouseover="Tip('Text mit <img src=\'pics/image.jpg\' width=\'60\'>Bild.')" onmouseout="UnTip()"> Homepage </a>
oder
<a href="index.htm" onmouseover="Tip('Text mit <img src=&quot;pics/image.jpg&quot; width=&quot;60&quot;>Bild.')" onmouseout="UnTip()"> Homepage </a>
 
Falsch:
<a href="index.htm" onmouseover="Tip('Text mit <img src="pics/image.jpg" width="60">Bild.')" onmouseout="UnTip()"> Homepage </a>


 
 
7. Tooltips mit CSS-Klassen gestalten

Fassen Sie einfach den Tooltip-Text in ein DIV- oder SPAN-Element der gewünschten CSS-Klasse ein. Dasselbe können Sie mit dem Titeltext machen (wie man einen Tooltip-Titel definiert, finden Sie in der Beschreibung des TITLE-Kommandos weiter unten auf dieser Seite). Beispiel:
... onmouseover="Tip('<div class=&quot;TipCls1&quot;>Text von Tooltip 1</div>')" ...
... onmouseover="Tip('<span class=\'TipCls2\'>Text von Tooltip 2</span>')" ...
... onmouseover="Tip('Tooltip Nummer 3', TITLE, '<div class=\'TitleCls\'>Ein Titel</div>')" ...

 
 
8. Tooltip-Inhalt per JavaScript-Variable oder Funktionsaufruf

Tip() akzeptiert anstatt eines Textes in Anführungszeichen auch eine JS-Variable oder einen Funktionsaufruf. Das gleiche gilt für Kommandos, die an Tip() oder TagToTip() übergeben werden. Vorteile: Jedesmal, wenn ein Tooltip erscheint, können Inhalt, Aussehen und Verhalten dynamisch festgelegt werden. Einundderselbe Text kann für mehrere Tooltips verwendet werden und muss ggf. nur in der Variable oder Funktion geändert werden. Der Umgang mit Anführungszeichen innerhalb des Tooltip-Texts wird einfacher, weil nicht schon beide Typen vergeben sind (doppelte Anführungszeichen als Begrenzer für das onmouseover-Attribut, einfache Anführungszeichen für den Tooltiptext). Variablen oder Funktionen werden am besten in einer separaten JS-Datei oder in einem <script>-Block im <head>-Bereich definiert:
<html>
<head>
...
<script type="text/javascript">
var txt1 = "Dies ist der Text des ersten Tooltips";

function TooltipTxt(n)
{
    return "Dies ist der Text des " + n + " Tooltips";
}

</script>
</head>
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
...
<a href="a.htm" onmouseover="Tip(txt1)" onmouseout="UnTip()">Link 1</a>
...
<a href="b.htm" onmouseover="Tip(TooltipTxt('zweiten'))" onmouseout="UnTip()">Link 2</a>
...
<a href="c.htm" onmouseover="Tip(TooltipTxt('dritten'))" onmouseout="UnTip()">Link 3</a>
...
</body>
</html>
DHTML: Tooltips per JavaScript  
Seitenanfang
 
Kurzbeschreibung
 
Cross-Browser
 
Dokumentation
 
Erweiterungen
 
Download
 
 
 
9. Tooltips mittels Kommandos konfigurieren

Die Standardeinstellungen für alle Tooltips können Sie in wz_tooltip.js selbst ändern, und zwar im Bereich "GLOBAL TOOLTIP CONFIGURATION". Das Aussehen und Verhalten einzelner Tooltips kann mit Kommandos geändert werden, siehe Kommando-Liste unten. Diese Kommandos haben Vorrang vor der globalen Konfiguration und werden an Tip() oder TagToTip() übergeben. Jedem Kommando muss mit einem Komma abgetrennt der gewünschte Wert folgen.
onmouseover="Tip('Irgendein Text', ABOVE, true)"
oder
onmouseover="TagToTip('HtmlTagID', TITLEFONTCOLOR, '#CCFFCC')"

Mehrere Kommandos formen eine komma-separierte Liste von Kommando-Wert-Paaren. Die Reihenfolge der Kommandos ist beliebig:
onmouseover="Tip('Irgendein Text', SHADOW, true, TITLE, 'Irgendein Titel', PADDING, 9)"


Kommando Beschreibung
ABOVE Platziert das Tooltip oberhalb des Mauszeigers. Wert: true oder false.
 
Kombinieren Sie ABOVE mit OFFSETY, um den vertikalen Abstand zur Maus einzustellen, oder mit CENTERMOUSE, um das Tooltip über der Maus zu zentrieren.
BGCOLOR Hintergrundfarbe des Tooltips. Wert: HTML-Farbe, in einfachen Anführungszeichen, z.B. '#D3E3F6' oder 'DarkCyan', oder Leerstring '' für keinen Hintergrund.
Beispiel:
onmouseover="Tip('Irgendein Text', BGCOLOR, '#D3E3F6')"
oder
onmouseover="Tip('Irgendein Text', BGCOLOR, '')"
BGIMG Hintergrundbild. Wert: Pfad zum Bild, in einfachen Anführungszeichen.
Beispiel:
onmouseover="Tip('Irgendein Text', BGIMG, '../images/tipbackground.gif')"
BORDERCOLOR Farbe des Tooltip-Randes. Wert: HTML-Farbe, in einfachen Anführungszeichen, z.B. '#dd00aa'.
BORDERSTYLE Stil des Tooltip-Randes. Wert: CSS border style, in einfachen Anführungszeichen. Empfehlenswert sind 'solid' (Standardeinstellung), 'dashed' oder 'dotted', andere funktionieren nicht in allen Browsern.
BORDERWIDTH Dicke des Tooltip-Randes. Wert: Ganzzahl ≥ 0. Standard ist 1. Wert 0 für keinen Rand.
Beispiel:
onmouseover="Tip('Irgendein Text', BORDERWIDTH, 2)"
CENTERMOUSE Zentriert das Tooltip unterhalb (oder oberhalb) des Mauszeigers. Wert: true oder false. Beachten Sie, dass die Zentrierung um den Wert abweicht, der global in wz_tooltip.js eingestellt ist (config. OffsetX) oder der per OFFSETX-Kommando gesetzt wurde.
Beispiel:
onmouseover="Tip('Irgendein Text', CENTERMOUSE, true, OFFSETX, 0)"
CLICKCLOSE Schließt das Tooltip, sobald der Benutzer irgendwo in das Tooltip oder in das Dokument klickt. Wert: true, false.
CLICKSTICKY Der Benutzer kann ein solches Tooltip fixieren (STICKY machen), indem er einfach auf das Element, zum Beispiel den Link klickt, zu dem das Tooltip gehört. Das macht es für den Benutzer bequemer, einen längeren Tooltiptext zu lesen. Wert: true, false.
 
onmouseover="Tip('Text', CLICKSTICKY, true, CLICKCLOSE, true, CLOSEBTN, true)"
In diesem Beispiel haben wir auch das CLICKCLOSE-Kommando gesetzt, damit der Benutzer das fixierte Tooltip mit einem Klick schließen kann. Zusätzlich stellen wir per CLOSEBTN auch noch einen Schließen-Knopf bereit.
CLOSEBTN Fügt einen Schließen-Knopf in die Titelleiste ein. Wert: true, false.
CLOSEBTNCOLORS Farben für den Schließen-Knopf.
 
Wert: Komma-separierte Liste (Array) von insgesamt vier HTML-Farben. Jede Farbe in einfachen Anführungszeichen. Die Liste muss von rechteckige Klammern umschlossen sein, siehe Beispiel unten, da sie eigentlich ein einzelner Parameter ist. Die vier Farben haben folgende Bedeutung:
1. Hintergrundfarbe
2. Textfarbe
3. Hervorgehobene Hintergrundfarbe, während sich die Maus über dem Knopf befindet
4. Hervorgehobene Textfarbe, während sich die Maus über dem Knopf befindet
Für jede dieser Farben kann auch ein Leerstring '' angegeben werden. In diesem Fall erbt der Knopf die Hintergrund- bzw. Textfarbe der Titelleiste.
 
Beispiel:
Tip('Text', CLOSEBTN, true, CLOSEBTNCOLORS, ['', '#66ff66', 'white', '#00cc00'], STICKY, true)
In diesem Beispiel ist die erste Farbe (Hintergrundfarbe) ein Leerstring. Solange sich die Maus nicht über dem Schließen-Knopf befindet, erbt er also den Titelleisten-Hintergrund.
CLOSEBTNTEXT Text im Schließen-Knopf. Wert in einfachen Anführungszeichen. Beispiel:
Tip('Tooltip-Text', CLOSEBTN, true, CLOSEBTNTEXT, 'Click Me', STICKY, true)
Global voreingestellt ist übrigens '&nbsp;X&nbsp;' - die zwei Leerzeichen-Entities neben dem großen X machen den Button etwas breiter.
COPYCONTENT
Dieses DIV ist temporär in ein Tooltip verwandelt worden, war aber ursprünglich ganz normaler Bestandteil des HTML-Dokuments.
COPYCONTENT wirkt sich nur auf Tooltips aus, die mit TagToTip() erzeugt werden, also wenn ein HTML-Element in ein Tooltip verwandelt wird.
Wert: true, false.
Wenn true (dieses Verhalten ist in wz_tooltip.js voreingestellt), wird nur das innere HTML bzw. der Text des HTML-Elements in das Tooltip kopiert. Wenn false, wird das ganze HTML-Element (sein DOM-Knoten) selbst in ein Tooltip verwandelt, was in folgender Hinsicht nützlich sein kann:
1.) Falls das umzuwandelnde HTML-Element ein Formular enthält, bleiben dessen Benutzereingaben erhalten, auch während das Tooltip unsichtbar ist.
2.) Das Tooltip übernimmt automatisch die CSS-Formatangaben des HTML-Elements.
Zur Verdeutlichung ein Beispiel, wie mit dem Wert false ein HTML-Element komplett in ein Tooltip verwandelt werden kann:
TagToTip('SomeID', COPYCONTENT, false, BORDERWIDTH, 0, PADDING, 0)
Wie man sieht, werden in diesem Beispiel auch der Tooltiprand (BORDERWIDTH) und das Padding auf 0 gesetzt. Somit sind nur der Rand und das Padding sichtbar, die per CSS für das HTML-Element selbst definiert wurden.
DELAY Das Tooltip erscheint nach der angegebenen Verzögerung in Millisekunden. Das Verhalten entspricht betriebssystem-basierten Tooltips.
Wert: Ganzzahl ≥ 0. In wz_tooltip.js voreingestellt und empfohlen ist der Wert 400.
Beispiel:
onmouseover="Tip('Irgendein Text', DELAY, 1000)"
DURATION Zeitspanne in Millisekunden bis das Tooltip geschlossen wird, auch dann, wenn das STICKY-Kommando angewandt wurde oder wenn sich die Maus noch über dem HTML-Element befindet, zu dem das Tooltip gehört.
Wert: Ganzzahl. Wert 0 für unbeschränkte Lebensdauer (voreingestellt).
 
Ein negativer Wert hat eine andere Bedeutung: Er spezifiziert eine Verzögerung in Millisekunden ab dem Mouseout-Ereignis, bis das Tooltip geschlossen wird. So kann man eine bestimmte Mindestanzeigedauer des Tooltips sicherstellen, selbst wenn die Maus den Link sofort wieder verlässt. Das kann für Tooltips sinnvoll sein, die nicht der Maus folgen - hier ein Beispiel:
onmouseover="Tip('Irgendein Text', FOLLOWMOUSE, false, DURATION, -2000)"
EXCLUSIVE Bis der Benutzer das Tooltip aktiv geschlossen hat, kann kein anderes erscheinen. Wert: true, false. Macht nur Sinn in Verbindung mit dem STICKY-Kommando (das Tooltip bleibt sichtbar, nachdem das auslösende HTML-Element von der Maus verlassen wurde, und folgt nicht der Maus) und dem CLOSEBTN- und/oder CLICKCLOSE-Kommando (damit der Benutzer das Tooltip schließen kann).
FADEIN Einblend-Animation. Der Wert (Ganzzahl ≥ 0) spezifiziert die Dauer des Einblendvorgangs in Millisekunden. 0 für keine Animation.
 
Nicht unterstützt von Opera älter als v.9.0, alten Safari-Versionen, einigen Versionen von Konqueror. Diese fallen auf nicht animiertes Verhalten zurück.
FADEOUT Ausblend-Animation. Der Wert (Ganzzahl ≥ 0) spezifiziert die Dauer des Ausblendvorgangs in Millisekunden. 0 für keine Animation. Empfohlen: Kombination mit FADEIN. In wz_tooltip.js voreingestellt (und empfohlen) ist eine kurze Animation von 100 ms, die kaum auffällt, aber das Ein- und Ausblenden angenehm weich macht.
 
Nicht unterstützt von Opera älter als v.9.0, alten Safari-Versionen, einigen Versionen von Konqueror. Diese fallen auf nicht animiertes Verhalten zurück.
FIX
Modus 1: Feste x- und y-Koordinaten.
Zeigt das Tooltip an den festen Koordinaten [x, y]. Wert: Zwei Ganzzahlen, komma-separiert, in eckigen Klammern. Also ein Array.
Beispiel:
onmouseover="Tip('Irgendein Text', FIX, [230, 874])"
Sie können auch Funktion(en) aufrufen, mit der Sie die Koordinaten dynamisch berechnen:
onmouseover="Tip('Text', FIX, [CalcFixX(), CalcFixY()], BORDERWIDTH, 2)"
oder
onmouseover="Tip('Text', FIX, CalcFixXY(), ABOVE, true)"
Im letzten Beispiel muss die Funktion CalcFixXY() ein Array mit zwei Ganzzahlen zurückgeben (return).
FIX
Modus 2: An einem bestimmten HTML-Element fixiert.
Positioniert das Tooltip an einem beliebigen HTML-Element; es kann sich auch um ein anderes Element handeln als das mit der Maus überfahrene. Wert: Drei komma-separierte Werte in eckigen Klammern. Der erste Wert gibt das HTML-Element an, entweder als ID (String in einfachen Anführungszeichen), oder als direkte Referenz (ohne Anführungszeichen). Der zweite und dritte Wert (Ganzzahlen) geben den horizontalen und vertikalen Abstand des Tooltips von der linken unteren Ecke des HTML-Elements an.
 
Beispiel 1, ID des HTML-Elements:
... onmouseover="Tip('Some text', FIX, ['PurpleSpan', 0, 5])"
...
<span id="PurpleSpan">HTML element to show the tooltip on</span>
Dieser Codeausschnitt lässt das Tooltip 5 Pixel unterhalb des SPAN-Elements erscheinen.
 
Beispiel 2, direkte Referenz auf HTML-Element:
<a href="..." onmouseover="Tip('Some text', FIX, [this, 0, 5], ABOVE, true)" onmouseout="UnTip()">Link</a>
Mit diesem Codeauschnitt wird das Tooltip direkt an dem mit der Maus überfahrenen HTML-Element (Link) positioniert. Als Referenz auf das HTML-Element wird hier bequem das JavaScript-Schlüsselwort this übergeben - das innerhalb von JavaScript-Eventhandlern (z.B. onmouseover) automatisch immer auf das betreffende HTML-Element verweist. Zusätzlich wird das ABOVE-Kommando verwendet, um das Tooltip oberhalb des HTML-Elements zu positionieren.
FOLLOWMOUSE Das Tooltip folgt den Bewegungen der Maus. Wert: true, false. Voreinstellung: true.
Falls Sie dieses Verhalten mit dem Wert false abstellen, entspricht es dem von typischen betriebssystem-basierten Tooltips.
FONTCOLOR Schriftfarbe. Wert: HTML-Farbe, in einfachen Anführungszeichen, z.B. '#990099'
FONTFACE Schrift (font face, font family).
Wert: Wie in HTML oder CSS, aber in einfache Anführungszeichen eingeschlossen, z.B. Tip('Irgendein Text', FONTFACE, 'Arial, Helvetica, sans-serif', FONTSIZE, '12pt')
FONTSIZE Schriftgröße. Wert: Größe mitsamt Einheit, in einfachen Anführungszeichen. Angabe der Einheit ('px', 'pt', 'em' etc.) ist notwendig. Beispiel: Tip('Irgendein Text', FONTSIZE, '12pt')
FONTWEIGHT Schriftdicke. Wert: 'normal' oder 'bold', in einfachen Anführungszeichen.
HEIGHT Höhe des Inhaltbereiches, ohne Titel, Schatten usw.. Wert: Ganzzahl, auch 0 oder negativ.
Beim Wert 0 (Voreinstellung) wird die Höhe automatisch an den Inhalt angepasst. Eine negative Zahl gibt eine Obergrenze für die automatische Höhenanpassung an (beim Wert -100 kann die Höhe also 100 Pixel nicht überschreiten).
 
Beachten Sie, dass die Tooltips den Regeln des W3C-Box-Modells folgen. Die Höhenangabe bezieht sich also nur auf den eigentlichen Inhalt des Tooltips, ohne Innenabstand (siehe PADDING-Kommando), Rand und ggf. Schatten. Falls der Inhalt mehr Platz beansprucht als vom HEIGHT-Wert vorgegeben, wird das Tooltip mit einem senkrechten Scollbalken ausgestattet. Es sollte sichergestellt sein, dass solche Tooltips festgeheftet sind (siehe STICKY-Kommando), damit der Benutzer den Scrollbalken bedienen kann.
JUMPHORZ Wert: true, false. Nochmals testen.
Wenn true: Wenn das Tooltip den Fensterrand berührt, springt es horizontal auf die andere Seite der Maus.
Wenn false (in wz_tooltip.js voreingestellt): Das Tooltip bleibt am rechten bzw. linken Fenserrand stehen. So oder so wird also versucht zu verhindern, dass das Tooltip teilweise hinter dem Fensterrand verschwindet (jedenfalls solange das Tooltip nicht zu groß ist).
JUMPVERT Wenn das Tooltip den unteren (oder oberen) Fensterrand berührt, springt es vertikal auf die andere Seite der Maus.
Wert: true, false. Dieses Verhalten ist in wz_tooltip.js als aktiv (true) voreingestellt.
 
Wichtig: Es sollte entweder das JUMPVERT- oder das JUMPHORZ-Verhalten oder beide aktiviert (true) sein - damit die Maus nicht auf das Tooltip geraten und so ein Mouseout-Ereignis auslösen kann, wenn das Tooltip gleichzeitig von einem waagrechten und einem senkrechten Fensterrand gestoppt wird. Lediglich bei STICKY-Tooltips spielt das keine Rolle. Empfohlen und in wz_tooltip.js voreingestellt: JUMPVERT true, JUMPHORZ false.
LEFT Tooltip auf der linken Seite des Mauszeigers. Wert: true, false.
LEFT und ABOVE Kommandos kombiniert.
Beispiel:
onmouseover="Tip('Irgendein Text', LEFT, true, ABOVE, true)"
OFFSETX Horizontaler Abstand zum Mauszeiger. Wert: Beliebige Ganzzahl, auch negativ.
OFFSETY Vertikaler Abstand zum Mauszeiger. Wert: Beliebige Ganzzahl, auch negativ.
OPACITY Transparenz des Tooltips. Wert: Ganzzahl zwischen 0 (vollständig transparent) und 100 (opak, undurchsichtig).
 
Opazität ist das Gegenteil von Transparenz, also
Opazität = 100 - Transparenz (in Prozent).
Weiteres Beispiel mit Bild (aufgenommen auf meiner 9000-km-Liegeradtour Hamburg-Nordkapp-München), Schatten mittels SHADOW-Kommando, zentriertem Inhalt mittels TEXTALIGN, Hintergrundbild via BGIMG und Animation via FADEIN und FADEOUT.
 
Nicht unterstützt von Opera älter als v.9.0, alten Safari-Versionen, einigen Versionen von Konqueror.
PADDING Innenabstand zwischen Rand und eigentlichem Tooltip-Inhalt. Wert: Ganzzahl ≥ 0.
SHADOW Tooltip wirft einen Schatten. Wert: true, false
SHADOWCOLOR Farbe des Schattens. Wert: HTML-Farbe, in einfachen Anführungszeichen.
Beispiel:
onmouseover="Tip('Irgendein Text', SHADOW, true, SHADOWCOLOR, '#dd99aa')"
SHADOWWIDTH Breite (Offset) des Schattens. Wert: Ganzzahl ≥ 0.
Beispiel:
onmouseover="Tip('Irgendein Text', SHADOW, true, SHADOWWIDTH, 7)"
STICKY Das Tooltip verändert seine Position nicht und bleibt sichtbar, bis ein anderes Tooltip erscheint. Wert: true, false.
 
Mit DURATION können Sie erzwingen, dass das Tooltip nach einer bestimmten Zeit verschwindet.
TEXTALIGN Textausrichtung im Tooltip. Wert: 'right', 'center', 'justify' oder 'left'.
Beispiel:
onmouseover="Tip('Irgendein Text', TEXTALIGN, 'right')"
TITLE Fügt eine Titelleiste hinzu. Wert: Text der Titelleiste, in einfachen Anführungszeichen. Kann auch HTML enthalten, was Ihnen viel zusätzliche Freiheit bei der Gestaltung des Titels gibt.
TITLEALIGN Textausrichtung in der Titelleiste. Wert: 'right', 'center', 'justify' oder 'left'.
TITLEBGCOLOR Hintergrundfarbe der Titelleiste. Wert: HTML-Farbe, in einfachen Anführungszeichen. Im Fall eines Leerstrings '' wird die Randfarbe (siehe auch BORDERCOLOR-Kommando) verwendet (dies ist Voreinstellung).
TITLEFONTCOLOR Farbe des Titeltextes. Wert: HTML-Farbe, in einfachen Anführungszeichen. Im Fall eines Leerstrings '' wird die Hintergrundfarbe des Tooltips-Körpers (siehe auch BGCOLOR-Kommando) verwendet (dies ist Voreinstellung).
TITLEFONTFACE Für den Titel ververwendete Schrift. Wert: Wie in HTML oder CSS, aber eingeschlossen in einfache Anführungszeichen. Im Fall eines Leerstrings '' (Voreinstellung) wird die Schrift des Tooltips-Körpers in 'fett' ('bold') verwendet.
Beispiel:
onmouseover="Tip('Irgendein Text', TITLE, 'Some Title', TITLEFONTFACE, 'Verdana,sans-serif')"
TITLEFONTSIZE Größe der Titelschrift. Wert: Größe mitsamt Einheit, in einfachen Anführungszeichen. Angabe der Einheit ('px', 'pt', 'em' etc.) ist notwendig. Beispiel: Im Fall eines Leerstrings '' wird die Schriftgröße des Tooltips-Körpers übernommen.
TITLEPADDING Innenabstand um den Titeltext herum. Wert: Ganzzahl ≥ 0.
WIDTH Legt die Breite des Tooltips fest. Wert: Ganzzahl, auch 0 oder negativ.
Wenn 0 (Voreinstellung), richtet sich die Breite automatisch nach dem Tooltip-Inhalt. Mit einer negativen Zahl (z.B. -240) kann eine Obergrenze für die automatische Breitenanpassung angegeben werden (in diesem Beispiel beträgt die Obergrenze also 240 Pixel).
 
Der Wert -1 für WIDTH hat eine besondere Bedeutung: In diesem Fall ist das Tooltip so breit wie der Titel plus gegebenenfalls der Schließen-Knopf.
 
Beachten Sie, dass die Tooltips den Regeln des W3C-Box-Modells folgen. Das heißt, die Breitenangabe bezieht sich nur auf den eigentlichen Inhalt des Tooltips, ohne Innenabstand (siehe PADDING-Kommando), Rand und ggf. Schatten.


 
 
Erweiterungen

Auf der Erweiterungen-Seite finden Sie zusätzliche Konfigurationsmöglichkeiten. Diese Plugins erweitern die Konfigurationsmöglichkeiten,
zum Beispiel um einen Ballon-Stil wie diesen.

 
 
 
 
Download

 
DHTML: Tooltips per JavaScript  
Seitenanfang
 
Kurzbeschreibung
 
Cross-Browser
 
Dokumentation
 
Erweiterungen
 
Download
 
wz_tooltip.js 5.31, Lizenz LGPL:
wz_tooltip.zip (16 KB)
 
history.htm (Changelog of wz_tooltip.js)
 
Hinweise für die Benutzer älterer Versionen
 
Seit Version 5.0 ist ein onmouseout-Attribut erforderlich für jedes HTML-Tag, das ein Tooltip enthält. Beispiel:
<a href="index.htm" onmouseover="Tip('Some text')" onmouseout="UnTip()"> Home </a>
Rufen Sie einfach UnTip() von diesen onmouseout-Attributen aus auf. Mehr in der Dokumentation weiter oben. Das zusätzlich erforderliche onmouseout-Attribut ist zwar weniger elegant, lässt Ihnen aber mehr Freiheit, bei welchem Event ein Tooltip verschwinden soll.

 
 
 
Alte Version
Falls Sie bereits eine Version älter als v.4.0 verwenden, aber wegen der geänderten Regeln zum Definieren von Tooltips und Einbinden des Scripts nicht auf v.4.0+ umsteigen möchten:
Dokumentation und Download von wz_tooltip.js v.3.45
 
 
 


 
 
 

 

 
Walter Zorn, München, 2008
Impressum und über diese Seite