Skip to content
Fuji UI
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, material, radius, and elevation.

Popover

Click-triggered floating content with a title and description.

  • The arrow is a triangle in the panel's own fill, so it meets the panel with no seam; showArrow={false} drops it, and sideOffset sets the gap to the trigger

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

KeyAction
Enter / SpaceOpens Popover from its trigger.
EscapeCloses the open surface and returns focus to the trigger.
TabFocusing 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

ModalDrawerDropdown Menu
CriterionStatusNote
Keyboard supportSupportedEnter/Space opens Popover; Escape closes; focus returns to the trigger.
Focus managementSupportedPopover traps focus while open; Tooltip is non-modal and does not trap focus.
Screen reader labelsSupportedPopover.Title/Description wire aria-labelledby/aria-describedby automatically.
Reduced motionSupportedprefers-reduced-motion: reduce zeroes all Fuji transition durations globally.
Reduced transparencySupportedprefers-reduced-transparency: reduce flattens Glass to opaque surfaces (portals included).
RTL layoutPartialLogical flex/grid gap works under dir="rtl"; directional chevrons are not yet mirrored.

API reference

Also accepts everything from React.ComponentPropsWithoutRef<typeof import("@base-ui/react/popover").Popover.Root>.

Popover.Content props

aligncenter
"center" | "start" | "end"

How the panel lines up against the trigger along its cross axis. Default "center".

alignOffset0
number

Shift in px along the cross axis, away from the `align` edge. Default 0.

showArrowtrue
boolean

Draws the triangle pointing back at the trigger.

sidebottom
"top" | "bottom" | "left" | "right" | "inline-start" | "inline-end"

Which side of the trigger the panel opens on. Forwarded to Base UI's Positioner, which flips it when there is no room. Default "bottom".

sideOffset8
number

Gap in px between the trigger and the panel. Default 8.

Also accepts everything from React.ComponentPropsWithoutRef<typeof import("@base-ui/react/popover").Popover.Popup>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent