Tooltip
A compound tooltip component built on Base UI that shows a floating label near a trigger element with animated entry/exit transitions.
Default
Alignment
Rich Content
Sides
With Delay
With Icon
Installation
npx shadcn@latest add @byronwade/tooltipProps
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "inline-start" | "inline-end" | "top" | Which side of the trigger the tooltip popup appears on. |
| sideOffset | number | 4 | Distance in pixels between the trigger and the tooltip popup. |
| align | "start" | "center" | "end" | "center" | Alignment of the tooltip relative to the trigger along the cross axis. |
| alignOffset | number | 0 | Offset in pixels along the alignment axis. |
| className | string | — | Additional CSS class names applied to the tooltip popup element. |
| children | React.ReactNode | — | Content rendered inside the tooltip popup. |