Tooltip

Tooltips zeigen beim Hovern kurze Zusatzinformationen zu einem Element.GitHubMarkdown

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.
  • 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, Links oder interaktiven Inhalte enthalten sein.
  • er die sichtbare Beschriftung eines Elements nicht wiederholt, sondern ergänzt.
  • vor dem Hinzufügen geprüft wird, ob der Tooltip überhaupt nötig ist. Ist die Aktion durch ihren Kontext oder ihre Beschriftung bereits klar, lässt du ihn besser weg.

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.
  • Symbole, Icons oder verkürzte Bezeichnungen zu erklären. Ein Tooltip kann Usern beispielsweise helfen, das Icon eines Buttons korrekt zu interpretieren.

Auf dieser Seite