Tooltip
Definitionen und Kontext beim Überfahren anzeigen. Begriffe definieren, Akronyme erklären oder verwandte Inhalte verknüpfen, ohne die Seite zu überladen.
Fügen Sie Hover-Text hinzu, um Begriffe zu definieren, Akronyme zu erklären oder auf verwandte Seiten zu verlinken, ohne den Hauptinhalt zu überladen.
Verwenden Sie Tooltips für:
- Inline-Definitionen von Begriffen, ohne den Lesefluss zu unterbrechen
- Erklärungen von Akronymen, die einigen Lesern möglicherweise nicht bekannt sind
- Kontextinformationen, die hilfreich, aber nicht unbedingt erforderlich sind
- Verknüpfungen zu verwandten Inhalten mit einer Handlungsaufforderung
Einfacher Tooltip
Bewegen Sie den Mauszeiger über APIEine Reihe von Protokollen, über die Softwareanwendungen miteinander kommunizieren., um die Definition anzuzeigen.
<Tooltip tip="A set of protocols for software applications to communicate.">
API
</Tooltip>Mit Überschrift
Fügen Sie über dem Hinweistext eine Überschrift hinzu:
Bewegen Sie den Mauszeiger über APIAPIApplication Programming Interface: eine Reihe von Protokollen, über die Softwareanwendungen miteinander kommunizieren., um die Definition mit einer Überschrift anzuzeigen.
<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ügen Sie einen Link hinzu, über den Nutzer mehr erfahren können:
Erfahren Sie mehr über APIsAPIApplication Programming Interface: eine Reihe 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 auch inline im Text. Sie können HTMLHyperText Markup Language, CSSCascading Style Sheets oder JSJavaScript-Begriffe 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 anzeigen | CodeGroup oder Inline-Code |
Faustregel: Tooltips sind für kurze Definitionen (1–2 Sätze) gedacht. Längere Erklärungen gehören in den Hauptinhalt oder in einen Expandable.
Props
Der beim Überfahren angezeigte Tooltip-Text.
Über dem Hinweis angezeigter Text.
Linktext der Handlungsaufforderung.
URL für die Handlungsaufforderung (erforderlich zusammen mit cta).
Der Text, der den Tooltip auslöst.
Barrierefreiheit
- Tooltips sind per Tastatur zugänglich (Tab zum Fokussieren, Anzeige bei Fokus)
- Verwenden
role="tooltip"für Screenreader - Der Auslösetext wird durch eine gestrichelte Unterstreichung als interaktiv gekennzeichnet