Tooltip Pattern

Tooltip Pattern

A tooltip can be used to describe or add additional information about an interactive element.


  • A Tooltip must have a focusable, interactive trigger
  • A Tooltip should show on mouse hover and keyboard focus
  • A Tooltip must not contain focusable or interactive content

Keyboard Interaction

  • Tabbing to the element displays the tooltip
  • Escape hides the tooltip
  • Focus always stays on the trigger element

Screen Reader Interaction

  • VoiceOver: Control + Alt + Shift + H: reads the tooltip when focused on the element



  • Needs role="tooltip"

Trigger Element

  • Needs aria-describedby set to the id of the tooltip


Usage in SLDS

Usage in Traditional Software Applications

ARIA Documentation: