Morphing Tooltip
Popovers
Source and install need .
pnpm dlx shadcn@latest add @assembli/tooltipTooltip
The everyday tooltip on Base UI: an inverted high-contrast label or a bordered card, a tip on any of four sides that flips and shifts at the screen edge, keyboard shortcut chips, an optional muted description for two-line hints, and a provider that groups delays so moving along a toolbar opens each tooltip instantly.
- Dependencies
- @base-ui/react(npm, opens in a new tab)
Props
Other props pass through to the root element.
children*
React.ReactElement<Record<string, unknown>>
The trigger. Its props and ref are merged with the tooltip's, so pass a real focusable element.
content*
React.ReactNode
The label, or the title line when
descriptionis set.description
React.ReactNode
A muted second paragraph, which turns the tooltip into a two-line rich hint.
shortcut
string | string[]
Keyboard chips after the label:
"Esc"or["⌘", "B"].variant
TooltipVariant
Default
"inverted"side
TooltipSide
Default
"top"align
"start" | "center" | "end"
Default
"center"sideOffset
number
alignOffset
number
Default
0arrow
boolean
Default
trueDraws a tip pointing at the trigger.
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
disabled
boolean
Stops the tooltip opening without touching the trigger.
delay
number
Overrides the provider's open delay for this trigger, in ms.
closeDelay
number
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | React.ReactElement<Record<string, unknown>> | – | The trigger. Its props and ref are merged with the tooltip's, so pass a real focusable element. |
| content* | React.ReactNode | – | The label, or the title line when description is set. |
| description | React.ReactNode | – | A muted second paragraph, which turns the tooltip into a two-line rich hint. |
| shortcut | string | string[] | – | Keyboard chips after the label: "Esc" or ["⌘", "B"]. |
| variant | TooltipVariant | "inverted" | |
| side | TooltipSide | "top" | |
| align | "start" | "center" | "end" | "center" | |
| sideOffset | number | – | |
| alignOffset | number | 0 | |
| arrow | boolean | true | Draws a tip pointing at the trigger. |
| open | boolean | – | |
| defaultOpen | boolean | – | |
| onOpenChange | (open: boolean) => void | – | |
| disabled | boolean | – | Stops the tooltip opening without touching the trigger. |
| delay | number | – | Overrides the provider's open delay for this trigger, in ms. |
| closeDelay | number | – |
