1. Tooltip Box
2. Beschreibung

Elemente mit Hinweistext haben standardmäßig keinen Tooltip.

Tooltips können z. B. bei Buttons, aber auch bei Checkboxen oder anderen interaktiven Elementen vorkommen.

Der Tooltip erscheint sobald Nutzende über das Element hovern (ab 2 sek) oder der Button für 2 sek fokussiert ist.

• Tooltips sollten kurz sein und nur zusätzliche Informationen vermitteln.
• Tooltips sollten Bestandteile der Beschriftung nicht wiederholen.
• Tooltips sollten nur eingesetzt werden, wo unbedingt nötig. 
• Bei Grafik-Buttons muss der Text des Tooltips mit der programmatischen Beschriftung des Screenreaders übereinstimmen. 

Die Maximale Anzahl von Zeichen pro Zeile in Tooltips ist 32 Zeichen. Bei längerem Inhalt wird der Tooltip mehrzeilig dargestellt. Der Tooltip wird im Regelfall zentriert unter dem Button dargestellt. Liegt der Button am linken/rechten Bildschirmrand so, dass der Platz zur Darstellung des Tooltips nicht ausreicht, so wird dieser horizontal verschoben (siehe Beispiel). Minimaler Abstand zum linken oder rechten Bildschirmrand sind 8px.

Im Standardfall öffnen sich Tooltips nach unten. Falls dies nicht möglich ist werden sie nach oben geöffnet.

In Ausnahmefällen können die Tooltips auch nach rechts öffnen (Beispiel: Schrittnavigations-Sidebar in Wizards). In diesem Fall wird der Text im Tooltip linksbündig statt zentriert dargestellt.

Wenn der Tooltip-Text zusätzlich zum programmatisch ermittelbaren Namen des Elements weitere Infos enthält, dann wird der programmatisch ermittelbare Name im Schriftschnitt extra-bold gesetzt, damit z. B. Nutzende einer Sprachsteuerungssoftware wissen, wie sie das Element referenzieren können. 

Beispiele: 

• Button zum Rückgängig machen bzw. Wiederholen von Eingaben in Formularen (siehe Formular: Verhalten von Formular-Footer)
• Buttons zum Entfernen von Gruppen in Formularen (siehe Formular: Verhalten von Elementgruppen)
• Pagination bei Tabellen und Listen (siehe Tabelle: Verhalten Tabellen-Footer (Fußzeile) mit Paginierung und Liste: Verhalten des Listen-Footers (Fußzeile) mit Paginierung)

Ist keine Abweichung zwischen Tooltip und programmatischer Beschriftung Elements vorhanden, so ist der Tooltiptext im Medium Schriftschnitt gesetzt.

Wenn ein Pop-Up-Menü geöffnet wird und durch Mouse-Hover auf einem im Hintergrund liegenden Element ein Tooltip erscheint, so befindet sich dieser immer hinter/unter dem Pop-Up-Menü, so dass der Pop-Up-Menü-Inhalt nie durch Tooltips verdeckt wird. Dies gilt selbst dann, wenn durch das Pop-Up-Menü der Tooltipinhalt selbst teilweise verdeckt wird. Pop-Up-Menü-Einträge mit Tooltips dürfen nicht vorkommen.

Bei Grafik-Buttons muss der Text des Tooltips mit der programmatischen Beschriftung des Screenreaders übereinstimmen.

• Bei Fokus mit der Tastatur werden Tooltips automatisch angezeigt.
• Bei Wechsel des Fokus oder ESC wird der Tooltip geschlossen.

• Bei Hover mit der Maus wird der Tooltip automatisch angezeigt.
• Beim Bewegen der Maus auf den Tooltip bleibt dieser stehen um das Lesen auch in großer Zoomstufe (Bildschirm-Lupe) sicherzustellen
• Beim Verlassen des Elements oder des Tooltips wird dieser ausgeblendet.