Component

Popover

The floating-surface family on one page: a hover/focus Tooltip for short hints and a click-triggered Popover for rich content. Both portal their content and inherit the active theme, radius, and elevation.

Tooltip

Hover/focus-triggered label for short hints.

Wrap the app once in <Tooltip.Provider> to share consistent open/close delays

Popover

Click-triggered floating content with a title and description.

When to use

Popover: rich, click-triggered content the user opts into (notifications, a settings menu, a small form) that stays anchored to its trigger.
Tooltip: a one-line hint on hover/focus for an icon-only button or truncated text.

When not to use

Tooltip for anything interactive inside it - tooltips close on blur/mouse-leave, so buttons or links inside are unreachable by keyboard. Use Popover instead.
Popover for a task the user must complete before continuing - use Dialog.

Keyboard

Key	Action
Enter / Space	Opens Popover from its trigger.
Escape	Closes the open surface and returns focus to the trigger.
Tab	Focusing the trigger exposes its tooltip description when configured.

Mobile behavior

Popover opens on tap like a click, so it works the same on touch as desktop.
Tooltip is hover-triggered and has no true touch equivalent - don't put content there that a touch user can't get any other way.

Accessibility notes

Popover.Content is wired to role="dialog" with aria-labelledby/aria-describedby from Popover.Title/Description.
Tooltip content is exposed via the accessible-description pattern, not a live region - it's announced when the trigger receives focus, not proactively.
Wrap the app once in <Tooltip.Provider> so hover/focus delay timing is consistent instead of per-instance.

Common mistakes

Putting a Button or Link inside Tooltip.Content - it becomes unreachable by keyboard since the tooltip closes on blur.
Forgetting Tooltip.Provider, which makes every tooltip instance use its own default delay instead of a consistent one.

Known limitations

No built-in long-press-to-open behavior for Tooltip on touch devices.

Related components

Modal Drawer Dropdown Menu

Popover.Content props

Prop	Type	Default	Description
showArrow	boolean	true	Renders the small triangle pointing at the trigger.
className	string	None	Extra classes merged onto the popup surface.

showArrowtrue

boolean

Renders the small triangle pointing at the trigger.

classNameNone

string

Extra classes merged onto the popup surface.

Criterion	Status	Note
Keyboard support	Supported	Enter/Space opens Popover; Escape closes; focus returns to the trigger.
Focus management	Supported	Popover traps focus while open; Tooltip is non-modal and does not trap focus.
Screen reader labels	Supported	Popover.Title/Description wire aria-labelledby/aria-describedby automatically.
Reduced motion	Supported	prefers-reduced-motion: reduce zeroes all Fuji transition durations globally.
Reduced transparency	Supported	prefers-reduced-transparency: reduce flattens Glass to opaque surfaces (portals included).
RTL layout	Partial	Logical flex/grid gap works under dir="rtl"; directional chevrons are not yet mirrored.

API reference

Prop	Type	Default	Description
open / defaultOpen	boolean	None	Controlled or initial floating surface state.
sideOffset	number	8	Distance from the trigger.
showArrow	boolean	true	Renders the directional arrow.
className	string	None	Additional classes applied to the component root.

open / defaultOpenNone

boolean

Controlled or initial floating surface state.

sideOffset8

number

Distance from the trigger.

showArrowtrue

boolean

Renders the directional arrow.

classNameNone

string

Additional classes applied to the component root.