Skip to content
Fuji UI
Component

Tooltip

A short label revealed on hover and on focus. Wrap the app once in Tooltip.Provider so the open and close delays are shared rather than per-instance.

Basic

Hover/focus-triggered label for short hints.

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

On an icon-only control

Its most common use - but the tooltip is not the accessible name. The control still needs its own aria-label, because a tooltip never reaches a touch user.

  • Never put information here that exists nowhere else - hover is unavailable on touch and to many keyboard users

Shared delays

Tooltip.Provider owns the timing, so moving between neighbouring triggers does not replay the opening delay each time.

API reference

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

Tooltip.Content props

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

How the tooltip 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.

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

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

sideOffset6
number

Gap in px between the trigger and the tooltip. Default 6.

Also accepts everything from React.ComponentPropsWithoutRef<typeof import("@base-ui/react/tooltip").Tooltip.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