Tooltip
A popup with context or label for a trigger element. Built on Radix UI Tooltip with configurable delay and placement.
Placement
Use the side prop to control which side of the trigger the tooltip appears on:
With Icon
Pair a tooltip with an icon-only button to give the control an accessible description that appears on hover or focus.
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
content* | React.ReactNode | — | The tooltip content. |
side | "top" | "right" | "bottom" | "left" | "top" | Side of the trigger to show the tooltip. |
sideOffset | number | 4 | Distance from the trigger in pixels. |
delayDuration | number | 700 | Milliseconds before the tooltip opens. |
asChild | boolean | false | Delegates trigger props to the child element. |