Tooltip

Hints on hover and focus. The popup is a small popover surface with an arrow, on base-ui.

Overview

Tooltip wraps its own base-ui Provider, so one instance is one line. TooltipTrigger renders a button, TooltipContent renders into a portal.

The trigger has no face of its own. Put a Box inside for the visual, or pass render to attach the tooltip to another element. An anchor is the common case: AddressDisplay does exactly that.

TooltipProvider is re-exported for a group that composes base-ui parts directly. Wrapping Tooltip instances in it changes nothing, since each one carries its own provider.

Basic

<Tooltip>
  <TooltipTrigger>Hover me</TooltipTrigger>
  <TooltipContent>Helpful context</TooltipContent>
</Tooltip>

Offset

sideOffset is the gap between the trigger and the popup, in px. The default is 4.

<TooltipContent sideOffset={4}>Default gap</TooltipContent>
<TooltipContent sideOffset={12}>A wider gap</TooltipContent>

Delay

delay on the trigger sets how long a hover waits before the popup opens. Help icons want zero.

<TooltipTrigger delay={0}>Instant</TooltipTrigger>
<TooltipTrigger delay={1000}>Patient</TooltipTrigger>

Tooltip props

Forwarded to base-ui's Tooltip.Root. The common props are listed.

openboolean

Controlled open state. Pair with onOpenChange.

defaultOpenbooleandefault: false

Open on first render, uncontrolled.

onOpenChange((open: boolean, eventDetails: TooltipPrimitive.Root.ChangeEventDetails) => void)

Fires on open and close, with the reason.

disabledbooleandefault: false

Never opens.

childrenReact.ReactNode | PayloadChildRenderFunction<unknown>

A TooltipTrigger and a TooltipContent.

TooltipTrigger props

base-ui's Tooltip.Trigger, unchanged.

delaynumberdefault: 600

Milliseconds before the tooltip opens on hover.

closeDelaynumberdefault: 0

Milliseconds before it closes after the pointer leaves.

closeOnClickbooleandefault: true

Close when the trigger is clicked.

renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TooltipTriggerState>

Swap the button for another element, like an anchor. Props merge onto it.

TooltipContent props

sideOffsetnumberdefault: 4

Distance in px between the trigger and the popup.

childrenReactNode

The popup body. The arrow renders before it.

classNamestring

Bridge className for the popup. Tailwind product code only, it dies with the bridge.

styleReact.CSSProperties

Inline style for the popup, merged after the lens styles.