Flexibel: WZ-Tooltips

Tooltipps mit CSS & Javascript

Das Skript WZ-Tooltips ist von vornherein einsetzbar für so gut wie alle Elemente, bei denen ein title-Attribut erlaubt ist. Die Tooltipps können im Handumdrehen mit einem Schatten, Transparenz und eingebundenen Bildern dargestellt werden. Ebenso einfach lassen sie sich mit einem eigenen Titelbalken am oberen Rand ausstatten.

Das Programm ist flexibel und sehr benutzerfreundlich: Alle Features sind über Variablen einstellbar. Auch beim Einsatz von mehreren Tooltipps im gleichen Dokument lässt sich das Erscheinungsbild jedes einzelnen individuell gestalten. Benötigt wird lediglich der Event-Handler onmouseover im jeweiligen Element. Da es oft nicht erwünscht ist, dass der Tooltipp unmittelbar erscheint, wenn der Anwender das Element mit der Maus berührt, hat der Skript-Autor sogar an eine einstellbare Verzögerungszeit gedacht.

Zu beachten sind im Grunde nur zwei Punkte: Werden zur Gestaltung der Tooltipps HTML-Tags eingesetzt, sollten Sie nur einfache Anführungszeichen notieren, die zusätzlich mit einem Backslash maskiert werden müssen. Andernfalls erhalten Sie einen Javascript-Fehler. Die Verwendung von Anführungszeichen sieht daher so aus:



onmouseover="return escape('Text mit Bild ')">Link


Alles, was Sie der return-Anweisung zuweisen, darf nicht umbrochen werden, sondern muss in einer Zeile stehen.



Weiter ist zu beachten, dass das Skript nicht wie üblich im Kopfbereich der Datei eingebunden wird, sondern erst am Dateiende vor oder auch hinter dem abschließenden body-Tag. Das Skript wird sonst in falscher Reihenfolge geladen, wodurch überhaupt keine Tooltipps erscheinen.



Fading Tooltipps



Fading Tooltipps - hier als Beispiel Sweet Titles - blenden Tooltipps mit einer einstellbaren Geschwindigkeit ein. Die Durchsichtigkeit verringert sich also kontinuierlich beim Einblenden. Da hierfür ein Timeout gesetzt werden muss, lässt sich dieser Effekt nur mit Javascript realisieren.



Das Skript sieht leider keine Anpassungen über Variablen vor, so dass Änderungen etwa der Hintergrundfarbe oder der Fading-Geschwindigkeit im Code-Block erfolgen müssen. Der Timeout für die Fading-Geschwindigkeit ist in folgender Zeile des Hauptskripts zu finden:



opacityID = window.setTimeout("sweetTitles.tip

Fade('"+newOpac+"')",60);


Die Anweisung ruft die Funktion tipFade() nach der angegebenen Verzögerung auf, um ihr einen neuen Parameter zu übergeben. Die Zeitangabe erfolgt in Millisekunden und bezieht sich allein auf den Zeitabschnitt des Wechsels von der Durchsichtigkeit bis zur völligen Undurchsichtigkeit.



Ein zweiter Timeout wird eingesetzt, um den Tooltipp mit einer gewissen Verzögerung anzuzeigen:



tID = window.setTimeout("sweet

Titles.tipShow()",500);


Wenn Ihnen der Tooltipp zu schnell oder zu langsam angezeigt wird, können Sie an dieser Stelle die Zeitangabe von 500 Millisekunden - das entspricht 0,5 Sekunden - den eigenen Wünschen gemäß ändern.



Wollen Sie hingegen eine andere Hintergrundfarbe als das voreingestellte Schwarz, müssen Sie in der CSS-Datei die Eigenschaft background neu definieren:



body div#toolTip {

position:absolute;

...

background:#60F;

}


Für die Farbangabe wird hier eine verkürzte Schreibweise verwendet: Da die üblichen RGB-Farbangaben immer aus Wertepaaren bestehen, kommt es nicht selten vor, dass beide Werte eines Paares gleich sind. In diesem Fall brauchen Sie nur einen davon angeben. #60F steht daher für #6600FF.