Tooltipps mit CSS & JavascriptDie besten Tooltipp-Skripts
Tooltipps – attraktiv und individuell
Tooltipps mit CSS & Javascript
Zur Anzeige von Browser-eigenen Tooltipps dienen sowohl das alt- als auch das title-Attribut. Bei diesen haben Sie als Webdesigner jedoch keine Einflussmöglichkeit auf das Aussehen und den genauen Zeitpunkt der Einblendung. Zudem können sie nur Text enthalten.
Die Autoren veranschaulichen Ihnen deshalb anhand verschiedener Möglichkeiten, wie Sie Tooltipps attraktiver und individueller gestalten. Die vorgestellten Tooltipps sind mit allen Javascript-fähigen Browsern einsetzbar. Außerdem sind die Beispiele so breit gefächert, dass Sie mit Sicherheit ein für Ihre Zwecke geeignetes Tooltipp-Layout finden.
Um die vorgestellten Skripts anpassen und bei Bedarf erweitern zu können, wird zunächst die grundsätzliche Funktionsweise von Javascript-Tooltipps erläutert.
Funktionsweise
Damit der Tooltipp sofort zur Verfügung steht, legen Sie einen Container an, der beim Aufruf der Datei geladen wird. Dabei handelt es sich für gewöhnlich um ein div-Element. Mit Hilfe der CSS-Deklaration display:none oder visibility:hidden ist dieses zunächst unsichtbar.
Da der Tooltipp an einer bestimmten Stelle über oder unter dem Mauszeiger erscheinen soll, muss bekannt sein, wo er sich befindet. Mit dem folgenden Event-Handler initialisieren Sie im Skript die Überwachung der Mausbewegungen für das gesamte Dokument:
document.onmousemove = posTooltip;
Bei jeder Bewegung der Maus wird die Funktion posTool tip() aufgerufen, um die aktuelle Position festzustellen:
function posTooltip(e) {
if(document.all) {
info = document.all.tooltip.style;
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
else {
info = document.getElementById
("Tooltipp").style;
x = e.clientX;
y = e.clientY;
}
info.left = (x - 60) + "px";
info.top = (y + 20) + "px";
}
Die jeweiligen Eigenschaften event.x und event.y sowie clientX und clientY speichern die horizontalen und vertikalen Pixel der Cursor-Position relativ zur linken oberen Ecke des Anzeigefensters. Diese über das event-Objekt ermittelten Koordinaten weisen Sie den Variablen x und y zu. Damit der Tooltipp genau an der gewünschten Stelle erscheint, werden dann noch von oben und von der Seite einige Pixel abgezogen oder hinzugezählt.
Zu beachten ist hierbei lediglich, dass das Event-Objekt beim Internet Explorer als window.event angesprochen werden muss, während es bei Firefox automatisch als Parameter übergeben wird.
Um den Tooltipp sichtbar zu machen, versehen Sie dann noch das gewünschte HTML-Element mit dem Event-Handler onmouseover. Über ihn rufen Sie eine Funktion auf, mit der Sie etwa den Inhalt des title-Tags auslesen und dynamisch in den Tooltipp schreiben. Dies wird meist mit der Eigenschaft innerHTML bewerkstelligt. Denn dabei werden auch HTML-Formatierungen etwa für Absätze und Zeilenumbrüche mit berücksichtigt.
Viele der hier vorgestellten Skripts nehmen Ihnen jedoch diesen Aufwand ab, indem jeder Link automatisch mit einem Tooltipp ausgestattet wird, wenn er sich innerhalb eines bestimmten div-Elements befindet.
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.
Bubble-Tooltipps
Tooltipps mit CSS & Javascript
Die recht beliebten Bubble-Tooltipps verwenden als Hintergrund eine kleine Grafik und ähneln dadurch den Sprechblasen in Comic-Heften. Zugleich sorgt diese Grafik für einen Tooltipp mit einem Pfeil zum Link und abgerundeten Ecken, wie sie ansonsten noch nicht möglich sind.
Der Nachteil ist allerdings eine Einschränkung der Flexibilität: Der Tooltipp kann nur unterhalb des Elements eingeblendet werden, da an anderer Stelle eine andere Grafik benötigt wird. Ebenso müssen Grafik und Textlänge aneinander angepasst werden, weil sonst der Text über den eigentlichen Tooltipp hinausragt oder abgeschnitten wird.
Zur Erzeugung eines Tooltipps verwendet das Skript Bubbletooltips eine etwas andere Technik als oben beschrieben: Als Container für den Tooltipp wird zuerst mit der Methode createElement() ein Knoten erzeugt, den die Methode append Child() dann an die bestehende Struktur anhängt. Um den Tooltipp zum Verschwinden zu bringen, wird das zuvor angehängte Element mit der Methode removeChild() wieder gelöscht.
Auch dieses Skript liest das title-Tag aus. Zusätzlich erscheint die im href-Attribut angegebene Adresse automatisch im Tooltipp. Um zu vermeiden, dass die Link-Adresse über den Tooltipp hinausragt, sollte sie auf 30 Zeichen begrenzt werden. Oder Sie entfernen die Adress-Anzeige vollständig. Die Links erhalten nur dann einen Tooltipp, wenn sie sich innerhalb eines div-Elements mit der ID content befinden. Dadurch werden nicht gleich sämtliche Links mit Tooltipps ausgestattet, sondern Sie können Links oder auch Abschnitte, bei denen ein Tooltipp erscheinen soll, gezielt festlegen.
Vorschau-Blasen 2.0
Aus dem Screenshot-Dienst Websnapr sind zwei Bubble-Erweiterungen hervorgegangen: die Websnapr Preview Bubble v2.0 und Link Preview v2. Sie zeigen beim Hovern über einen Link eine Vorschau auf die dahinter liegende Website in einer etwas größeren Blase an.
Die Skripts greifen dabei auf vorgefertigte Bilder zurück, die der Dienst Websnapr bereitstellt. Ganz frisch sind die Vorschau-Thumbnails deshalb nicht, aber um einen visuellen Eindruck der Seite zu gewinnen, die den Besucher hinter einem Link erwartet, taugt das Vorschau-Bild allemal. Die Installation von Websnapr Preview Bubble ist simpel. Passen Sie zuerst den Pfad zum mitgelieferten Blasen-Hintergrund auf Ihrem Webserver an, zum Beispiel:
var bubbleImagePath = '/img/bg.png';
Im Header Ihrer Seite rufen Sie das Skript auf:
Die Klasse previewlink ordnen Sie jedem Link zu, der eine Vorschaufunktion erhalten soll:
<a class="previewlink" href=
http://www.spiegel.de>SPON
Snap Preview Anywhere funktioniert prinzipiell auf die gleiche Weise. Snap fertigt von allen mit dem Skript verknüpften URLs Screenshots an und hält sie vor, um diese als Thumbnail in einem Tooltipp-Bubble auszuliefern, sobald die Adresse mit der Maus angesteuert wird. In Weblogs und trendigen Web-2.0-Sites werden diese Vorschau-Skripts im Moment sehr gern eingesetzt.
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:
<a href="index.html"
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.