Accessibility

Tooltip Pattern

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

Behavior

  • 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

Markup

Tooltip

  • Needs role="tooltip"

Trigger Element

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

References

Usage in SLDS

Usage in Traditional Software Applications

ARIA Documentation: http://w3c.github.io/aria-practices/#tooltip