TOOLTIP

When to Use

Example: product page — wishlist icon hint

  • Provide additional context for icon-only buttons or truncated text
  • Explain a UI element without cluttering the layout
  • Show keyboard shortcuts or brief helper text

Usage Guidelines

DO

Keep tooltip text concise (1–2 lines max). Use Rich Tooltip for multi-line content with actions

Don’t

Don't place critical information in tooltips — they are not accessible on touch devices

Accessibility

  • Radix UI natively implements role="tooltip" and aria-describedby
  • Tooltip auto-shows when the trigger element receives keyboard focus
  • Escape key closes the tooltip