# Tooltip

Tooltips sind kurze Hilfselemente, die beim Hovern über ein Element zusätzliche Informationen anzeigen.

## Guidelines

# Grundlagen

## Best practices

Achte bei der Verwendung eines Tooltips darauf, dass ...

- diese verwendet werden, um knappe Informationen mit niedriger Priorität
  bereitzustellen – z. B. eine kurze Beschreibung eines
  [Icons](/04-components/content/icon/overview).
- der Tooltip nur ergänzende Informationen enthält und keine wichtige
  Information (z. B. Error-Meldung oder Feedback) der Benutzeroberfläche
  ersetzt. Es muss immer bedacht werden, dass beispielsweise auf dem Smartphone
  Tooltips vom User nicht wahrgenommen werden.
- der Inhalt kurz, verständlich und präzise formuliert ist. Tooltips bestehen
  meist nur aus 1-3 Wörtern.
- er erst beim Hovern oder Fokussieren erscheint.
- innerhalb nur Text verwendet wird. In einem Tooltip sollten keine
  [Buttons](/04-components/actions/button/overview),
  [Links](/04-components/navigation/link/overview) oder interaktiven Inhalte
  enthalten sein.
- sie nicht für Elemente mit vorhandener sichtbarer Beschriftung eingesetzt
  werden.

## Verwendung

Verwende einen Tooltip, um ...

- zusätzliche kurze Hinweise oder Kontext zu einem Element der
  Benutzeroberfläche bereitzustellen, ohne die Benutzeroberfläche zu überladen.
  Für umfangreichere Informationen – die über den direkten Kontext des Elements
  hinausgehen – eignet sich z. B. ein
  [ContextualHelp](/04-components/overlays/contextual-help/overview).
- Symbole, Icons oder verkürzte Bezeichnungen zu erklären. Ein Tooltip kann
  Usern beispielsweise helfen,
  [das Icon eines Buttons](/04-components/actions/button/overview) korrekt zu
  interpretieren.