Components
Tooltip
A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it, built on Radix UI.
Install
npx shadcn@latest add https://atomx.acau.net/r/tooltip.jsonUsage
Radix Tooltip requires a TooltipProvider somewhere above any Tooltip in the tree. The Tooltip export already wraps its own provider for convenience, but if you render many tooltips it's more efficient to mount a single TooltipProvider near your app root and use the bare primitives below it.
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Hover me</Button>
</TooltipTrigger>
<TooltipContent>Tooltip content</TooltipContent>
</Tooltip>
</TooltipProvider>Preview
Default
Props
TooltipProvider extends React.ComponentProps<typeof TooltipPrimitive.Provider>.
| Prop | Type | Notes |
|---|---|---|
delayDuration | number | Delay before opening on hover, in ms. Defaults to 0 (open immediately). |
skipDelayDuration | number | Window during which subsequent tooltips skip the delay. |
disableHoverableContent | boolean | If true, the tooltip will close even when hovering its content. |
Tooltip extends React.ComponentProps<typeof TooltipPrimitive.Root>.
| Prop | Type | Notes |
|---|---|---|
open | boolean | Controlled open state. |
defaultOpen | boolean | Initial state when uncontrolled. |
onOpenChange | (open: boolean) => void | Fired when open state changes. |
delayDuration | number | Overrides the provider's delay for this tooltip. |
TooltipContent extends React.ComponentProps<typeof TooltipPrimitive.Content>.
| Prop | Type | Notes |
|---|---|---|
side | "top" | "right" | "bottom" | "left" | Preferred side. Defaults to "top". |
align | "start" | "center" | "end" | Alignment along the side. Defaults to "center". |
sideOffset | number | Gap between trigger and tooltip. Defaults to 0. |