Ravox KitOverlays
Tooltip
Short text that names an icon-only button or explains a control. Opens on hover after a delay and immediately on keyboard focus, closes on Esc, flips to another side when space runs out and is read along with its trigger.
Settings
Toggles
Examples
Icon-only buttons
Explaining a number
Taxa de conversão2,84%
Disabled button
The four sides
Installation
The command creates components/ui/tooltip.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add tooltipProps
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | The tooltip text. One sentence, no link or button (for that, use Hover Card). |
| children | ReactElement | — | The trigger: a single element that can receive focus. A disabled button doesn't fire events: wrap it in a <span tabIndex={0}>. |
| side | "top" | "bottom" | "left" | "right" | "top" | Which side the tooltip appears on. Flips to the opposite side when it doesn't fit. |
| align | "start" | "center" | "end" | "center" | Alignment with the trigger, on the other axis. |
| shortcut | string | — | Keyboard shortcut shown next to the text (e.g. "⌘B"). |
| delay | number | 500 | Wait before opening on hover, in ms. On keyboard focus it opens immediately. |
| sideOffset | number | 6 | Distance from the trigger, in px. |
| open / onOpenChange | boolean / (open) => void | — | Controlled mode. |
| disabled | boolean | false | Doesn't show the tooltip (and removes aria-describedby). |
| <TooltipProvider delay skipDelay> | number / number | 500 / 300 | Optional, around several tooltips: a shared delay and the window in which the neighbor opens without waiting after one closes. |