Tooltipps sind trendy und zeigen Zusatzinfos an der passenden Stelle einer Website an. Internet Professionell zeigt, wie Sie Tooltipps selbst programmieren, gestalten und anpassen.
Anzeige
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.
