Container: The Tooltip container is a floating overlay that houses its text content.
Content: The Tooltip's main content provides more context to element it's attached to.
Arrow: A directional indicator connecting the Tooltip to its trigger. Its placement depends on where the Tooltip opens.

Tooltips provide supplementary context about the element or workflow it's related to. Tooltip content should be informative and helpful but not serve as the primary source of information. Avoid redundant text.

When using the Tooltip, ensure it contains only static content. For more information on Tooltips and interactive elements, see Interactive Elements in Accessibility.

Tooltips and Popovers both display content within a small, floating overlay. While similar, they are not interchangeable and each have their own separate use cases:

Tooltips display short, non-interactive text intended to provide the user with additional context. They appear automatically on hover and focus and are dismissed when the user moves away.
Popovers typically contain long-form content that may include interactive elements. By default, they require interaction to open but can be made to open on hover.

Best practices

Arrow usage

Keep the arrow visible to clearly associate the Tooltip with its trigger. This is especially helpful when multiple elements each have their own Tooltip.

Do: Use the arrow to visually connect the tooltip to its trigger.

Placement

Choose a placement that avoids obscuring related content. The Tooltip automatically repositions when it would overflow the viewport but starting with a thoughtful default reduces visual shifting.

Non nisi nulla Lorem ut nostrud culpa quis quis.

Do: Place Tooltips where they won't cover content a user may need to read.

Non nisi nulla Lorem ut nostrud culpa quis quis.

Don't: Place Tooltips where they may obstruct other content.

Appearance

Arrow visibility

The arrow is displayed by default to visually connect the Tooltip to its trigger. The arrow can be hidden when the Tooltip's trigger association is evident.

Arrow

The default arrow connects the Tooltip to its trigger.

No arrow

Arrows may be removed for a cleaner look in denser layouts.

Trigger styles

When the Tooltip trigger must exist as inline text, we recommend using the underlined style to make the trigger more visually distinct.

Base

The default trigger renders as inline text, blending with surrounding content.

Underlined

An underlined trigger makes the interactive element more visually distinct within body text.

Behaviors

States

Base

In its resting state, the trigger is interactive and the Tooltip overlay is hidden.

Open

The Tooltip becomes visible when the user hovers over or focuses the trigger.

Disabled trigger

Disabled

When disabled, the Tooltip will not display with the trigger is interacted with.

Animation

Tooltips animate in and out with a subtle fade and directional slide, where the direction matches the Tooltip's placement. The default transition duration is 125ms and can be customized with a component property.

Tooltips appear after a 250ms hover delay by default to prevent accidental activation during normal mouse movement. This delay can be adjusted as needed.

Positioning

Tooltips can be positioned on any side of their trigger. The position is not a guarantee—smaller viewports may cause the Tooltip to reposition as needed to remain visible to the user.

Bottom

Bottom positioning is the default.

Top

Positions the Tooltip above the trigger.

Right

Positions the Tooltip to the right of the trigger.

Left

Positions the Tooltip to the left of the trigger.

When using multiple Tooltips close together are placed within a Tooltip Group, they will share open and close animation timing and delay. When one Tooltip in the group is opened, others will open immediately when interacted with.

Tooltip group

When one Tooltip in the group is already open, hovering another trigger opens it immediately without the usual delay.

Content

Tooltip content should describe what the element is or does. Write as a full sentence with a period in sentence case.

Rules

One sentence
Full sentence with period
Sentence case

Length

Tooltips are intended to be short and informative. Limit content to short phrases or a single sentence. Longer content risks obstructing other elements in the UI.

If more information is needed, we recommend adding the content to the page directly or consider using the Popover component.

Do: Limit content to a phrase or sentence.

Don't: Write paragraph-length explanations in tooltips.

Icon-only buttons

When using tooltips on icon-only buttons, describe the action the button performs.

Do: Describe the action the icon represents.

Don't: Use the icon name or use a generic label.

Sentence case

For short phrases or descriptions, write Tooltip text in sentence case.

Do: Use sentence case.

Don't: Use title case or all caps.

Tooltip

Anatomy

Guidelines

Tooltip vs Popover