Home	Tooltip-Hauptseite

Erweiterungen für die Tooltip-JavaScript-Bibliothek wz_tooltip.js Mit diesen Plugins haben Sie zusätzliche Möglichkeiten, die Tooltips individuell (per Kommandos) oder global zu konfigurieren. Einige der hier vorgestellten Plugin-Dateien sind bereits in der Download-Datei wz_tooltip.zip enthalten.   Wenn Sie ein Plugin bzw. die von ihm zur Verfügung gestellten Kommandos nutzen wollen, müssen Sie einfach die betreffende JavaScript-Datei in Ihre Seite einbinden, und zwar unmittelbar nach der Haupt-Datei wz_tooltips.js: <script type="text/javascript" src="wz_tooltip.js"></script> <script type="text/javascript" src="tip_centerwindow.js"></script> Falls nötig, müssen Sie Pfade zu den JavaScript-Dateien anpassen. Ersetzen Sie ggf. "tip_centerwindow.js" durch den Dateinamen der gewünschten Erweiterung. Mehrere Plugins können in beliebiger Reihenfolge nach wz_tooltip.js eingebunden werden.

Ballon Tooltip   Seitenanfang   Beispiel Gibt dem Tooltip einen "Ballon"-Stil, mit abgerundeten Ecken und einem Stiel, der in Richtung Maus zeigt.   Plugin-JavaScript-Datei: tip_balloon.js tip_balloon.zip (5 KB) herunterladen   Diese Datei enthält auch einen Satz Bilder für den Stiel, die Ränder und die Ecken des Ballon-Tooltips. Diese Bilder müssen Sie speichern, am besten innerhalb des Verzeichnisses 'tip_balloon'. In der Plugin-JavaScript-Datei tip_balloon.js müssen Sie ggf. den Pfad zu diesem Bilderverzeichnis anpassen, und zwar im Abschnitt "GLOBAL TOOPTIP CONFIGURATION". Die anzupassende Zeile config. BalloonImgPath = ... ist selbsterklärend und (englisch) kommentiert.   Sie können natürlich auch eigene Rand-/Ecken-/Stiel-Bilder erstellen und verwenden. Die Eck-Bilder (lt.gif, rt.gif, rb.gif und lb.gif) müssen quadratisch sein, ihre Seitenlänge muss der Breite der linken/rechten (l.gif, r.gif) und Höhe der oberen/unteren (t.gif, b.gif) Randbilder entsprechen. Ggf. sollten Sie in tip_ballon.js die drei globalen Konfigurationsvariablen für die Bilddimensionen anpassen. (Falls Sie verschiedene Bildersets verwenden wollen, können Sie via Kommandos für jedes Balloon-Tooltip individuell den Pfad und die Bilddimensionen angeben. Siehe Kommandoliste unten.)

Kommando Beschreibung BALLOON Gibt dem Tooltip einen Ballon-Stil (Bubble-Stil). Wert: true oder false. Empfohlen: Kombination mit dem ABOVE-Kommando; Sie können auch den Wert der Variablen config. Above in der globalen Kofiguration in wz_tooltip.js auf true setzen, um dies zum Standard-Verhalten zu machen.   Beispiel: onmouseover="Tip('Text des Ballon-Tooltips', BALLOON, true, ABOVE, true)" BALLOONIMGPATH BALLOONIMGEXT Pfad zum Verzeichnis, in dem sich die Bilder für den Rand, die Ecken und den Stiel des Ballon-Tooltips befinden. Der Pfad sollte relativ zur HTML-Datei sein und muss in einfachen Anführungszeichen stehen. Nützlich, wenn Sie für ein bestimmtes Ballon-Tooltip ein anderes Bilder-Set zu verwenden möchten (z.B. andere Farbe). Mit BALLOONIMGEXT können Sie optional eine andere Dateiendung spezifizieren als in wz_balloon.js vorgegeben, z.B. "png" statt "gif".   Beispiel für einen Satz von Bildern in einem anderen Verzeichnis, und mit einer anderen Dateiendung: onmouseover="Tip('Tooltip text', BALLOON, true, BALLOONIMGPATH, 'somepath/somedir/', BALLOONIMGEXT, "png")" BALLOONEDGESIZE BALLOONSTEMWIDTH BALLOONSTEMHEIGHT Wenn Sie für ein bestimmtes Tooltip einen anderen Satz von Rand-/Ecken-/Stiel-Bildern verwenden möchten, können Sie mit diesen Kommandos ggf. die Bildgrößen angeben, soweit sie sich von den Voreinstellungen in tip_balloon.js unterscheiden. Werte: Ganzzahlen > 0. BALLOONSTEMOFFSET Stellt den horizontalen Abstand des Stiels von der Maus ein. Wert: Ganzzahl, auch negativ.   Daneben können Sie auch mit dem OFFSETX-Kommando experimentieren, das den horizontalen Abstand des Tooltips vom Mauszeiger einstellt (siehe Beschreibung der Kommandos auf der Tooltip-Hauptseite).

Weitere Ballon-Stile Simple Skin von Stasiek Płoski (Homepage: http://www.flupy.net/stasiek ).

Tooltip im Fenster zentrieren   Seitenanfang   Beispiel Plugin-JavaScript-Datei: tip_centerwindow.js (in der Download-Datei wz_tooltip.zip enthalten)   Stellt Kommandos zur Verfügung, mit denen sich das Tooltip im Clientbereich des Fensters (also im sichtbaren Bereich der Seite) zentrieren lässt. Dieses Plugin macht nur Sinn und funktioniert nur bei Tooltips, auf die das STICKY-Kommando angewendet wurde, die also an ihrer Anfangsposition sichtbar bleiben, bis ein anderes Tooltip erscheint.

Kommando Beschreibung CENTERWINDOW Zentriert das Tooltip im Clientbereich des Fensters (bzw. ggf. Frames). Wert: true oder false.   Beachten Sie, dass die Position des Tooltips um OFFSETX und OFFSETY (siehe Kommandos auf der Tooltip-Hauptseite) oder um die entsprechende globale Voreinstellung in wz_tooltip.js (config. OffsetX und config. OffsetY) von der Fenstermitte abweicht.   Empfohlen: Kombination mit CENTERALWAYS (selbe Erweiterung).   Beispiel: onmouseover="Tip('Ein Text', STICKY, true, CENTERWINDOW, true, CENTERALWAYS, true)" CENTERALWAYS Sorgt dafür, dass das Tooltip zentriert bleibt, auch wenn das Fenster gescrollt oder seine Größe geändert wird. Wirkt sich nur aus, wenn CENTERWINDOW (siehe oben) angewendet wurde. Value: true, false.

Tooltip mitscrollen   Seitenanfang   Beispiel Plugin-JavaScript-Datei: tip_followscroll.js (in der Download-Datei wz_tooltip.zip enthalten)   Diese Erweiterung fixiert das Tooltip relativ zum sichtbaren Clientbereich, wenn das Fenster gescrollt wird. Macht nur Sinn und funktioniert nur bei Tooltips, auf die das STICKY-Kommando angewendet wurde, die also an ihrer Anfangsposition sichtbar bleiben, bis ein anderes Tooltip erscheint.

Kommando Beschreibung FOLLOWSCROLL Das Tooltip bleibt im Clientbereich fixiert, auch wenn das Fenster gescrollt wird. Wert: true oder false.   Beispiel: onmouseover="Tip('Ein Text', STICKY, true, FOLLOWSCROLL, true)"

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