Sie haben JavaScript deaktiviert. Vermutlich sind Sie ein Kollege und wollen nur sehen, ob meine Website auch ohne JavaScript funktioniert.
Andernfalls: Bitte aktivieren Sie JavaScript!

webdesign weisshart Startseite

zurück zum Standard-Style

Tooltip-Problem?

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Der Screencast zeigt, dass der Tooltip auch dann noch angezeigt wird, wenn der Mauszeiger das Bild verlässt, zu dem der Tooltip gehört.
Screencast: heise.de

Tooltip – so nennt man das kleine Fenster, das aufpoppt, wenn ein HTML-Element ein title-Attribut hat.
Beispielcode:

<img src="image.jpg" alt="Screencast" title="Dieser Text wird im Tooltip angezeigt.">

Ob der Text des title-Attributs aber wirklich in einem Tooltip angezeigt wird, hängt vom Browser ab, u.U. auch von speziellen Einstellungen des Browsers. Ganz sicher nicht angezeigt wird der Tooltip auf Touchscreens, weil es dort kein Hovern des Mauszeigers gibt. Ob die Information den User erreicht, ist also mehr als fraglich. Daher ist das title-Attribut nicht geeignet, um wesentliche Inhalte zu transportieren.
Nun ist ein weiteres Problem aufgetaucht. Genauer: Der aktuelle Chrome-Browser, ebenso Opera und Edge, auf dem aktuellen Apple-Betriebssystem macOS 13, zeigen beim Hovern den Tooltip, löschen ihn aber nicht mehr vom Bildschirm, auch wenn der Mauszeiger das entsprechende Objekt verlässt. In obigem Screencast ist diese Verhalten zu sehen. Sehr nervig. Ich habe den offensichtlichen Bug natürlich sowohl an Apple als auch an Google gemeldet. Aber warum berichte ich hier darüber?
Ich habe für mich die Konsequenz gezogen, das title-Attribut nur noch äußerst sparsam einzusetzen, und Informationen, die der Besucher auch wirklich sehen soll, auch sichtbar zu machen. Im Falle von Bilder verwende ich eine ständig sichtbare Bildunterschrift. Als HTML-Technik setze ich hierfür Definitionslisten ein.
Beispielcode:

<dl> <dt><img src="image.jpg" alt="Screenshot" /></dt> <dd>Hier die – immer sichtbare – Beschreibung</dd> </dl>

Hier das Ergebnis. Das Beispiel zeigt, dass mit wenig Aufwand auch ein Karussell mit Untertiteln versehen werden kann.

PS: Screencast erstellt mit der macOS-App bildschirmfoto.app

Nachtrag 09.04.2023

Das Problem scheint behoben. Ob es ein Chrome-Update oder ein macOS-Update war konnte ich leider nicht herausfinden. Ist aber auch egal.

Logo wdw

Creative Commons Lizenzvertrag

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

Kommentare

Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.

? Anweisungen zur Eingabe von BB Code Wenn Javascript verfügbar ist, können Sie die obigen Schaltflächen zum Einfügen der folgenden Steuercodes verwenden (an der Cursorposition oder um gegebenenfalls markierten Text):

[b]als wichtig <strong>[/b] hervorgehobener Text
[c]Quellcode[/c] oder optisch hervorgehobenes Zitat