Popover · Tooltip Atom
Both are thin: positioning, collision handling, dismissal, and focus return come from Base UI, and the library supplies the surface and the arrow.
Popover
<Popover trigger={<Button variant="outline">Details</Button>} side="bottom"> <Text weight="semibold">Billing period</Text> <Text size="sm" tone="muted">Charges run from the 1st to the last day of the month.</Text></Popover>
<Tooltip label="This is a tooltip"> <Button variant="ghost" tone="neutral" iconStart={<Info size={16} />}> Hover me </Button></Tooltip>Tooltip
A Tooltip takes a plain string, on purpose. It is announced as the trigger's description, and
markup inside one is either unreadable to a screen reader or a Popover in disguise.
It supports the same preferred side, align, sideOffset, and showArrow placement controls as
Popover; Base UI may flip the resolved side to avoid a collision.
Do
Use a Tooltip for a short label on an icon-only control.
Don't
Put a link or a button inside a Tooltip — a pointer user cannot reach it before it closes.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| trigger | ReactElement | — | The element that opens it. Rendered as the trigger rather than wrapped, so your button stays your button. |
| side / align | Side | Align | 'bottom' / 'center' | Preferred placement; it flips when there is no room. |
| sideOffset | number | 8 | Distance from the anchor, in px. |
| showArrow | boolean | true | Shows the complete, direction-aware SVG tail that connects the surface to its trigger. |
| open / onOpenChange | boolean | fn | — | Optional control. Uncontrolled by default. |
Tooltip uses the same placement rows above, with side='top', sideOffset={6}, and
showArrow={true} by default. It intentionally takes label instead of Popover content.