Tooltip

Overview

Tooltip delivers brief, contextual hints for UI elements that need a short explanation. It's single-line, lightweight, and always on-demand, appearing on hover or focus without interrupting the user flow. For longer explanations use Info Tooltip, and for rich content with images or actions use Popover.

When should you use them?

Use a tooltip to explain an unlabeled icon, clarify a control, or add a short hint that doesn't fit in the layout. Keep it to a single line of supporting text. If the content needs more than a sentence or includes actions, reach for Info Tooltip or Popover instead.

How should you use them?

• Use tooltips for short, single-line hints; use Info Tooltip or Popover for longer or richer content.
• Trigger on hover and focus so both mouse and keyboard users can see the hint.
• Position the tooltip in the direction with the most available space (Top, Bottom, Left, or Right).
• Never put essential information only in a tooltip, since it's hidden until triggered.
• Keep the arrow on for precise anchoring, or hide it for a cleaner floating look.
• Make sure tooltip content is reachable by keyboard and screen readers.