Tooltip
Definitionen und Kontext beim Überfahren anzeigen. Begriffe erklären, Abkürzungen auflösen oder auf verwandte Inhalte verlinken, ohne die Seite zu überladen.
Füge Hinweistexte hinzu, um Begriffe zu erklären, Abkürzungen aufzulösen oder auf verwandte Seiten zu verlinken, ohne den Hauptinhalt zu überladen.
Verwende Tooltips, wenn du:
- Begriffe definierst, ohne den Lesefluss zu unterbrechen
- Abkürzungen erklärst, die manche Leser möglicherweise nicht kennen
- Kontext bereitstellst, der hilfreich, aber nicht unverzichtbar ist
- Auf verwandte Inhalte verlinkst mit einem Call-to-Action
Einfacher Tooltip
Fahre mit der Maus über APIEine Gruppe von Protokollen, über die Softwareanwendungen miteinander kommunizieren., um die Definition zu sehen.
<Tooltip tip="A set of protocols for software applications to communicate.">
API
</Tooltip>Mit Überschrift
Füge eine Überschrift über dem Tipp-Text hinzu:
Fahre mit der Maus über APIAPIApplication Programming Interface: eine Gruppe von Protokollen, über die Softwareanwendungen miteinander kommunizieren., um die Definition mit Überschrift zu sehen.
<Tooltip
headline="API"
tip="Application Programming Interface: a set of protocols for software applications to communicate."
>
API
</Tooltip>Mit Link für eine Handlungsaufforderung
Füge einen Link zu weiteren Details hinzu:
Erfahre mehr über APIsAPIApplication Programming Interface: eine Gruppe von Protokollen, über die Softwareanwendungen miteinander kommunizieren.Mehr erfahren → in unserer Dokumentation.
<Tooltip
headline="API"
tip="Application Programming Interface: a set of protocols..."
cta="Learn more"
href="/components/overview"
>
API
</Tooltip>Inline-Verwendung
Tooltips funktionieren inline im Text. Du kannst Begriffe wie HTMLHyperText Markup Language, CSSCascading Style Sheets oder JSJavaScript direkt im Text erklären.
Explain <Tooltip tip="HyperText Markup Language">HTML</Tooltip>,
<Tooltip tip="Cascading Style Sheets">CSS</Tooltip>, or
<Tooltip tip="JavaScript">JS</Tooltip> terms inline.Tooltips im Vergleich zu anderen Komponenten
| Bedarf | Komponente |
|---|---|
| Einen Begriff inline definieren | Tooltip |
| Ein Konzept ausführlich erklären | Expandable oder separater Abschnitt |
| Vor etwas Wichtigem warnen | Callout (Note, Warning) |
| Kontextbezogenen Code zeigen | CodeGroup oder Inline-Code |
Faustregel: Tooltips eignen sich für schnelle Definitionen (1–2 Sätze). Längere Erklärungen gehören in den Hauptinhalt oder in ein Expandable.
Props
Der Tooltip-Text, der beim Überfahren angezeigt wird.
Text, der über dem Tipp angezeigt wird.
Text des Call-to-Action-Links.
URL für den Call-to-Action (erforderlich mit cta).
Der Text, der den Tooltip auslöst.
Barrierefreiheit
- Tooltips sind per Tastatur bedienbar (Tab zum Fokussieren, wird bei Fokus angezeigt)
- Verwendet
role="tooltip"für Screenreader - Der Auslösetext ist gestrichelt unterstrichen, um die Interaktivität anzuzeigen