Tooltip

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Inline Dialog, Popover

Beschreibung: Die Tooltip-Komponente zeigt kontextuelle Informationen an, wenn Nutzer:innen über ein Referenzelement fahren oder dieses fokussieren. Sie dient als visuelles Gegenstück zum Aria-Label und richtet sich ausschließlich an sehende Nutzer:innen ohne Screenreader-Unterstützung. Die Komponente ist primär als interne Komponente innerhalb von KoliBri konzipiert und als veraltet markiert.

Die Tooltip-Komponente wird innerhalb von KoliBri verwendet und ist nur dann wirklich barrierefrei, wenn von einem Referenzelement auf das Tooltip verwiesen wird. Sie ist nicht für den direkten Einsatz in der Anwendungsentwicklung gedacht.

Die Komponente ist im Quellcode als veraltet markiert und soll in einer kommenden Hauptversion entfernt werden.

Beispiel

Das Tooltip erscheint, wenn über das Referenzelement gefahren wird oder es fokussiert wird:

<div style="display: flex; gap: 1rem;">
 <button aria-label="Startseite">
  <kol-icon _icon="codicon codicon-home"></kol-icon>
  <kol-tooltip>Zur Startseite</kol-tooltip>
 </button>
</div>

Barrierefreiheit

• Für Screenreader unsichtbar: Der Tooltip-Text ist mittels Aria-Hidden für Screenreader verborgen. Die Beschriftung sollte bereits im Aria-Label des Referenzelements vorhanden sein.
• Nur für sehende Nutzer: Das Tooltip dient ausschließlich der visuellen Ergänzung und ist kein Ersatz für aussagekräftige Beschriftungen.
• Nicht tastaturzugänglich: Der Text des Tooltips ist selbst nicht mit der Tastatur direkt erreichbar, wird aber zusammen mit dem Fokus auf das Referenzelement angezeigt.
• Barrierefreiheitstests: Tooltips können bei Tests ignoriert werden, sofern sichergestellt ist, dass der Tooltip-Text in gleicher Weise vom Screenreader des Referenzelements vorgelesen wird.

Links und Referenzen

Verwendung

Tastatursteuerung

Taste	Funktion
Escape	Schließt das Tooltip, um überlagerte Seiteninformationen wieder sichtbar zu machen.
Tab	Fokussiert das Referenzelement; das Tooltip wird dann angezeigt.

Best Practices / Empfehlungen

• Kurze, prägnante Texte: Tooltips sollten aus wenigen Worten bestehen – max. ein bis zwei kurze Sätze.
• Referenzelement mit Block-Display: Das Referenzelement muss display: block, display: flex, display: grid oder ähnlich sein – nicht display: inline. Sonst wird die Positionierung fehlerhaft.
• Aria-Label vorhanden: Das Referenzelement muss immer ein Aria-Label haben, damit Screenreader-Nutzer die Information erhalten.
• Keine kritischen Informationen: Verwenden Sie Tooltips nicht für sicherheitskritische oder rechtlich relevante Hinweise – diese müssen für alle Nutzer sichtbar sein.
• Konsistenz: Einheitliche Platzierung, Stil und Latenz verbessern die Benutzerfreundlichkeit.

Anwendungsfälle

• Icon-Buttons mit zusätzlicher visueller Beschriftung
• Kontextuelle Hinweise neben Formularfeldern
• Ergänzende Erklärungen bei kompakten UI-Elementen
• Schnelle Orientierungshilfen beim Überfahren mit der Maus

FAQ

Kann ich das Tooltip für alle Nutzer sichtbar machen?
Verwenden Sie stattdessen ein <kol-popover-button> oder eine andere Komponente, die auch für Screenreader-Nutzer zugänglich ist.

Muss das Referenzelement auf dem Client liegen?
Ja, das Tooltip wird positioniert relativ zum Referenzelement im DOM.

Kann ich HTML-Inhalte im Tooltip verwenden?
Das ist möglich über den Slot, sollte aber sparsam eingesetzt werden – Tooltips sind für einfache, kurze Texte vorgesehen.

Konstruktion / Technik

Playground

Beispiel eines Tooltip-Elements in einer Button-Komponente:

<div style="display: flex; gap: 1rem;">
 <button aria-label="Einstellungen öffnen">
  <kol-icon _icon="codicon codicon-settings"></kol-icon>
  <kol-tooltip>Einstellungen</kol-tooltip>
 </button>
 <button aria-label="Hilfe anzeigen">
  <kol-icon _icon="codicon codicon-info"></kol-icon>
  <kol-tooltip>Hilfe</kol-tooltip>
 </button>
</div>

Funktionalitäten (mit Code)

Breite konfigurieren

Die Breite des Tooltips richtet sich normalerweise nach dem Inhalt. Um die Breite eines Tooltips zu konfigurieren, setzen Sie auf dem umgebenden Container eine CSS-Custom-Property:

<div style="--kol-tooltip-width: 15rem;">
 <button aria-label="Beschreibung">
  <kol-icon _icon="codicon codicon-info"></kol-icon>
  <kol-tooltip>Dies ist ein längerer Tooltip-Text, der auf mehrere Zeilen umgebrochen wird, wenn die definierte Breite nicht ausreicht.</kol-tooltip>
 </button>
</div>

Verschiedene Referenzelemente

Das Tooltip funktioniert mit verschiedenen Referenzelementen:

<!-- Mit Button -->
<button aria-label="Button mit Tooltip">
 Button Text
 <kol-tooltip>Tooltip Text</kol-tooltip>
</button>

<!-- Mit Link -->
<a href="#" aria-label="Link mit Tooltip">
 Link
 <kol-tooltip>Link-Tooltip</kol-tooltip>
</a>

<!-- Mit benutzerdefinierten Elementen -->
<div role="button" aria-label="Div mit Tooltip" style="display: inline-block; cursor: pointer;">
 Interaktives Element
 <kol-tooltip>Element-Tooltip</kol-tooltip>
</div>

Bekannte Probleme und Workarounds

CSS contain: layout mit Positionierungsfehlern

Bei Nutzung von CSS contain: layout innerhalb oder auf dem Tooltip-Element kann die Positionierung fehlerhaft sein. Dies ist ein , der im dokumentiert wurde.

Workaround: contain: layout nicht direkt auf dem Tooltip setzen. Nutzen Sie diese Eigenschaft nur dort, wo sie für Container Queries benötigt wird.

Ausblick: Langfristig könnte die native anstelle von floating-ui eingesetzt werden. Diese ist derzeit nur in Chrome verfügbar; für Firefox und Safari wird weiterhin floating-ui benötigt.

Inline-Display auf Referenzelement

Das Referenzelement darf nicht display: inline haben, sondern sollte mindestens display: inline-block oder ein Block-Kontext-Element sein. Andernfalls wird das Tooltip nicht korrekt positioniert.