|
| 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 ' X ' - 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.
|
|
|
|
English version
Home
Das
Download