Wie man merkt, finde ich immer mehr Gefallen an Javascript. Darum hier auch ein Tutorial zum Thema “Tooltips in Javascript”. Tooltips sind kleine Boxen die erscheinen wenn der User mit der Maus über ein Objekt fährt. In ihnen kann man zum Beispiel den Linkzielort oder sonstige Infos angeben.

Voraussetzungen:

• Basis HTML & CSS Kenntnisse
• Basis  Javascript Kenntnisse

Lernziele:

• Browserweiche
• Mausposition abfragen
• Div-Container dynamisch mit Text füllen

Vorschau

In Grundaufbau funktioniert das Script folgendermassen:

Wenn der Benutzer über einen Link oder ein Bild fährt wird ein Javascript aufgerufen, welches den Div Container an die richtige Position setzt und mit Text füllt.

Zuerst brauchen wir etwas CSS:

Wichtig sind dabei die Angaben position: absolute und z-index: 1 mit ihnen geben wir einerseits an, dass sich die Position nicht relativ zu den anderen Objekten verhalten soll und dass sich das Ganze über dem sonstigen Inhalt platzieren soll.

Nun kommt unser Javascript:



Wir haben vier Funktionen. Nun aber jede Funktion für sich erklärt:

function tagTip(text):
Mit dieser Funktion rufen wir unser Tooltip Script auf. Nun greifen wir mit document.getElementById(‘block’) auf unseren Div-Container zu und ändern die CSS Eigenschaft “display” zu “block”. Das heisst der Div-Container wird nun angezeigt. Mit innerHTML können wir Text in den Container schreiben. Dazu brauchen wir unsere Variable text die als Parameter übergeben wird.. Zusätzlich setzen wir die Variable “drag” auf true. Diese Variable brauchen wir später um zu bestimmen ob sich der Div Container zur Mausposition bewegen soll oder nicht. Nun kommt die Browserweiche. Da der Internet Explorer sich wieder einmal nicht an die Regeln hält müssen wir zuerst feststellen, ob es sich um den Internetexplorer handelt oder nicht. Mit if (!document.all) erreichen wir das, denn wenn das Script im Internet Explorer ausgeführt wird, liefert diese Anweisung true zurück, wenn nicht false. Das Ausrufezeichen sagt, dass das Script in der If-Anweisung nur ausgeführt wird wenn der Wert = false ist also das Script nicht im Internet Explorer ausgeführt wird.

Mit window.onmousemove=showitMOZ bewirken wir, dass immer wenn der onmousemove-Event eintrifft unsere Funktion showitMOZ ausgeführt wird. Schlussendlich das Ganze noch für den IE: document.onmousmove=showit nur das eben da die andere Funktion aufgerufen wird.

function showit():
Zuerst prüfen wir ob die Variable drag gleich true ist. Diese Abfrage brauchen wir, damit der Tooltip nicht immer angezeigt wird. Dann wird über die Style Eigenschaft und event.x bzw. event.x die x- und y-Position gesetzt. Hier addieren wir noch zusätzlich 5 Pixel hinzu für eine schönere Anzeige des Toolips. Diese Funktion wird über unsere Browserweiche nur im Internet Explorer ausgeführt!

function showitMOZ(e):
Nun kommt noch unsere Funktion für alle anderen Browser. Hierbei wird noch der Parameter “e” übermittelt. Ihn ihm wird der Event gespeichert, den brauchen wir um die x- und y-Position zu ermitteln. Dies machen wir dann auch mit “e.pageX” und “e.pageY“. Zusätzlich fügen wir für eine schönere Darstellung noch 5 Pixel hinzu (sonst flackert der Tooltip) da wir dies ja dann über CSS zuweisen brauchen wir noch das “px” damit das auch CSS konform wird. Dies fügen wir einfach mit einem Additionszeichen hinzu.

function unTip():
Schliesslich noch eine Funktion, die die Variable drag auf false setzt und so verhindert, dass der Tooltip weiter angezeigt wird.

Das wärs auch schon! Nun müssen wir nur noch in HTML einen Link, ein Bild oder sonst ein HTML Element erstellen und dort folgendes kleine Stück Code hinzufügen: onmouseover=”tagTip(‘Hier kommt der Tooltip Text’)” onmouseout=”unTip()”

Damit bewirken wir, dass wenn der Benutzer mit der Maus darüber fährt, der Tooltip aufgerufen wird und beim Verlassen wieder verschwindet.

Nun muss nur noch der Div-Container irgendwo im Code verankert werden.

Hier noch einige Anwendungsbeispiele:

TagTip Here

')" onmouseout="unTip()" href="#">TagTip Here

Experimentiert ein bisschen damit rum, es ist zum Beispiel auch möglich mit diesem Prinzip auch ganze Bilder als Tooltip anzuzeigen. Dabei einfach den <img> Tag in den Tooltip Funktionsaufruf schreiben.

Zusatz:

Fügen wir dem CSS Code des Tooltips noch folgende Zeilen hinzu, können wir den Tooltip sogar transparent anzeigen:

filter:alpha(opacity=50); /* IE */
-moz-opacity: 0.50; /* Gecko */
opacity: 0.50; /* Opera */


Vielen Dank fürs Lesen und Fragen, Kritk und Wünsche bitte in die Comments

MFG
Michael