Tooltip displays additional information without interrupting user flow.

Component Status

Healthy when Available
Show details
Healthy when Available
Published: June 22, 2022
Updated: July 11, 2023

Design Usage

  • Use the Tooltip component keep extra information off the screen but accessible
  • For large and/or structured content use Modal Component
  • The tooltip is usually a hover or focus-activated. Hovering over text is a desktop (mouse) pattern that doesn't work on mobile devices