tooltip API
overlays/tooltip.tsx
Tooltip
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | — | Trigger the tooltip describes — a single element child gets `aria-describedby` wired while visible. |
content* | React.ReactNode | — | Bubble content. |
direction | TooltipDirection | Side | undefined | TooltipDirection.Bottom | Preferred side — enum or plain 'top' | 'bottom' | 'left' | 'right'. |
size | TooltipSize | LegacySize | undefined | TooltipSize.Compact | Bubble size preset — enum or legacy 'sm' | 'md' | 'lg' | 'xl'. |
delayMs | number | undefined | 400 | Hover delay before showing, in ms. Default 400. |
open | boolean | undefined | — | Controlled visibility. Hover, focus, touch, Escape and outside presses still request changes through `onOpenChange`; the parent decides. |
describeTrigger | boolean | undefined | true | Merge the bubble's id into the trigger's `aria-describedby` while open. Set false when the trigger already carries a stable description, so it is read once. |
contentClassName | string | undefined | — | Extra classes for the tooltip bubble. |
widthClassName | string | undefined | — | Width constraint override for the bubble (e.g. 'max-w-xs'). |
placement | "top" | "right" | "bottom" | "left" | undefined | — | @deprecated Legacy alias for `direction`. |
animationVariants | unknown | — | @deprecated Animations are CSS-driven now; this prop is ignored. |
Show native HTML props
Native HTML Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | undefined | — | Optional bold heading above the content. |
onOpenChange | ((open: boolean) => void) | undefined | — | Called whenever the tooltip requests to open or close, in controlled and uncontrolled mode. |