Overlays · Application UI
Tooltip
A compound tooltip component built on Base UI that shows a floating label near a trigger element with animated entry/exit transitions.
Feature showcase
Installation
Features
6 examples
Default, Alignment, Rich Content, Sides, With Delay, With Icon.
API
Props
| 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. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/tooltip.tsx |
| Default example | content/examples/tooltip/default.tsx |
| Alignment example | content/examples/tooltip/alignment.tsx |
| Rich Content example | content/examples/tooltip/rich-content.tsx |
| Sides example | content/examples/tooltip/sides.tsx |
| With Delay example | content/examples/tooltip/with-delay.tsx |
| With Icon example | content/examples/tooltip/with-icon.tsx |