TOOLTIP
Contextual label built on Radix UI. Appears on hover/focus with fade + zoom animation. Requires wrapping TooltipProvider.
DEPS:@radix-ui/react-tooltip
PREVIEW
INSTALLATION
USAGE
PLACEMENT
ANATOMY
TooltipProviderContext provider. Required once per subtree. Controls open delay.TooltipRoot — manages hover state.TooltipTriggerThe element that shows the tooltip on hover/focus. Use asChild to style any element.TooltipContentThe tooltip panel. Portaled. Has fade + zoom entrance animation.PROPS
| PROP | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "top" | Side of the trigger where the tooltip appears. |
| sideOffset | number | 6 | Pixel offset from the trigger element. |
| delayDuration | number (on Provider) | 400 | Milliseconds before the tooltip opens on hover. |