Tooltip
A popup that displays information related to an element on hover or focus. Built on Radix UI Tooltip.
Default
On Icon Button
Usage
Use tooltips to label icon-only buttons or add supplementary information to an element.
Tooltips should contain brief, non-essential text. Never put critical information or interactive content inside a tooltip.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| delayDuration | number | 700 | Delay in ms before tooltip appears (on TooltipProvider) |
| side | "top" | "right" | "bottom" | "left" | "top" | Preferred side for the tooltip (on TooltipContent) |
| sideOffset | number | 0 | Distance from the trigger in px (on TooltipContent) |