<aside> ⚠️

Note: Consider if content truly needs to be hidden. Visible content is faster to scan and process, while hidden content makes users work harder through extra clicks/hovers and adds accessibility load for screen readers and keyboard users.

</aside>

Anatomy

1. Content
2. Arrow

Appearance

Tooltips are a type of overlay that displays over the top of the main page. They consist of four main parts; a container, content, a close button, and optional arrow. The tooltip container uses an elevation that gives the appearance of being on top of the main page.

Content

The content area is flexible but typically only includes short amounts of informational text, ideally less than 150 characters.

While the user can click anywhere away from the tooltip to dismiss/close it.

Behavior

Tooltips appear in response to a user action such as hovering or clicking on an info icon. They remain on screen until dismissed or the user clicks or taps the main screen.

Usage

When to use Tooltip vs Popover

• Tooltip — short, text-only supplemental info anchored to its own trigger. The trigger and open/close state are managed internally.
• Popover — rich content (images, actions, lists) that needs to be opened by an external event, such as a guided callout triggered after an async operation completes.

Use for short informational messages under 150 characters

Do not use for errors or warnings