Tooltipps mit CSS

Tooltipps mit CSS & Javascript

Neben den per Skript erzeugten Tooltipps ist es auch möglich, Tooltipps allein mit Hilfe von CSS zu realisieren. Dies hat den Vorteil, dass sie auch bei ausgeschaltetem Javascript verfügbar sind. Da sie mit einer Formatierungssprache erstellt werden, lassen sich CSS-Tooltipps natürlich auch perfekt formatieren.

Die Funktionsweise ist denkbar einfach: Sie besteht darin, dass das Tooltipp-Element beim Laden der Seite mit der CSS-Deklaration display:none unsichtbar gemacht wird. Mit Hilfe des hover-Selektors wird dieser Schalter dann beim Überfahren mit der Maus auf display:block gesetzt. Mit diesem Selektor ist der Tooltipp auch exakt positionierbar.

Indem Sie weiter differenzieren, insbesondere mit Nachfahren-Selektoren, lässt sich sogar das Aussehen einzelner Elemente innerhalb eines Tooltipps beeinflussen. So können Sie beispielsweise mit der folgenden Anweisung festlegen, dass nur jene span-Elemente mit einer Schriftgröße von 16 Pixel dargestellt werden, die sie sich innerhalb eines Links befinden, der zur Klasse Tooltipp gehört:

a.tooltip span {

font-size: 16px;

}

Diese Art von Selektoren können Sie auch noch auf tiefere Verschachtelungen anwenden oder an beliebiger Stelle durch einen weiteren Klassenselektor ergänzen.

Mit der folgenden CSS-Anweisung ist es möglich, CSS-Tooltipps mit einem Hintergrundbild auszustatten:

background-image:url(bildname.gif);

Dieses Hintergrundbild wirkt oft noch ansprechender, wenn es teilweise transparent ist. Wegen der Browser-Unterschiede sind dafür leider noch immer verschiedene Anweisungen erforderlich. Mit den drei folgenden decken Sie diese Unterschiede ab:

filter:alpha(opacity=75);

-moz-opacity:.75;

opacity:.75;

Der Wert 75 steht für eine Deckkraft von 75 Prozent. Erlaubt sind Werte zwischen 0 und 100 oder 0 und 1. Mit dem Wert 0 machen Sie den Text oder das Bild vollkommen durchsichtig und mit dem höchsten Wert völlig undurchsichtig.

Bibliothek: JS-Tooltips

JS-Tooltips ist, wie der Name schon sagt, eine Javascript-Bibliothek und besteht aus einer CSS- und einer Skript-Datei mit sehr schlankem und übersichtlichem Code. Wie bei den meisten anderen externen Javascript-Bibliotheken sieht die Einbindung so aus:

Um die Event-Handler zu registrieren, befindet sich in der HTML-Beispiel-Datei ein vom Autor eingefügter zweiter Skript-Bereich:

window.onload = function() {

generateToolTips();

document.onmousemove = tt_position;

}

Wenn Sie diese Anweisungen an den Anfang der externen Skript-Datei kopieren, ist kein zweiter Skript-Bereich mehr nötig, sondern es genügt die einfache Einbindung des Skripts. Sie brauchen dann nur noch die Elemente, bei denen ein Tooltipp erscheinen soll, der zuständigen CSS-Klasse zuzuordnen. Das Skript liest den im title-Tag notierten Text aus. Das hat den Vorteil, dass der Inhalt des Tooltipps nicht separat notiert werden muss. Er befindet sich daher am vorgesehenen Platz und erfüllt auch ohne Skript seine Funktion.

JS-Tooltips ist ein leicht handhabbares Skript, für das keine großen Änderungen erforderlich sein dürften. In unveränderter Form kann das Skript für a-Elemente und span-Elemente eingesetzt werden. Eine Erweiterung auf andere Elemente ist jedoch rasch zu bewerkstelligen. Auch die gewünschten Formatierungen lassen sich schnell und problemlos über die externe CSS-Datei vornehmen.