„Halt! Stop!“, ruft es aus der einen Ecke. „Was ist das eigentlich?“, schallt es aus der anderen durch den Raum. „Das ist doch das, was am Mauszeiger erscheint, wenn man über ein Bild fährt, oder? Nein? Jetzt bin ich verwirrt …“ Fragende Blicke im gesamten Raum. Was war passiert?
Rückblick: 15 Teilnehmer versammeln sich für eine Schulung. Es geht um On-Page-Suchmaschinenoptimierung. Die Teilnehmer kennen sich gut aus, sind sehr interessiert am Thema und lauschen genau hin. Gerade kommt der Referent beim Thema „Bilder“ an, als im Nebensatz das Wörtchen „ALT-Tag“ fällt.
Was ist der ALT-Tag, was nicht?
„ALT“ steht für „alternativ“ – der ALT-Tag soll ein Bild adäquat ersetzen, wenn dieses nicht sichtbar ist. Ein großes „Aha“ geht durch die Runde. Doch die Frage bleibt: Was ist das, was am Mauszeiger erscheint, wenn man über ein Bild fährt? Oder anders gesagt: Was ist mit dem Tooltip? Ist dafür nicht der ALT-Tag zuständig?
Nein. Oder besser gesagt: Das sollte er nicht sein! Das Problem: Der Internet Explorer zeigt den im ALT-Tag beinhalteten Text tatsächlich als Tooltip von Bildern an. Dafür ist der ALT-Tag standardmäßig jedoch nicht vorgesehen. Das Zauberwort für den Tooltip lautet: „title-Tag“.
title-Tag ist für Tooltip zuständig
Sowohl ALT-Tag als auch title-Tag sind Attribute des IMG-Tags (IMG = image). Ein grundlegender Unterschied: Der ALT-Tag ist Pflicht, der title-Tag als Universalattribut nicht. Wie nun also ein Bild mit Tooltip in HTML auszeichnen? Ein Beispiel:
<img src=“http://www.seite.de/bagger.gif“ alt=“Der Bagger gräbt ein 5 Meter tiefes Loch.“ title=“Bagger in der Grube“>
Als Tooltip des Bildes „bagger.gif“ auf der Website „www.seite.de“ erschiene nun der Text „Bagger in der Grube“.
Tooltip im Internet Explorer
Und im Internet Explorer? Erschiene dann trotzdem der ALT-Tag als Tooltip? Nein, glücklicherweise nicht: Für die Tooltip-Anzeige im Internet Explorer hat das title-Attribut Vorrang vor dem ALT-Attribut.
Nicht immer ist allerdings ein Tooltip erwünscht. Da das ALT-Attribut jedoch Pflicht ist und der Internet Explorer dieses automatisch als Tooltip anzeigt, muss der Tooltip explizit ausgeschaltet werden – mit einem leeren title-Attribut im IMG-Tag:
<img src=“http://www.seite.de/rose.gif“ alt=“geschlossene gelbe Rose.“ title=“ “>
Fazit
Auch wenn der Internet Explorer den ALT-Tag als Tooltip anzeigt, ist dieser nicht für diese Funktion gedacht. Nutzen Sie immer beide Attribute: Das ALT-Attribut für Alternativtext, das title-Attribut für den Tooltip – sollte dieser auch leer sein.
P.S.: Der Mouseover-Effekt
Der Mouseover-Effekt hat übrigens nichts mit dem Tooltip zu tun. Der CSS- bzw. Javascript-Befehl zeigt sich darin, dass ein Element sein Erscheinungsbild ändert, wenn der Mauszeiger auf dieses Element zeigt. Ein Beispiel wäre ein Button, der bei Berührung mit dem Mauszeiger seine Farbe ändert.
