Data Display
Hover/focus tooltip with positioning logic and touch-aware delays.
7 props across 4 groups
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The trigger element the tooltip attaches to. |
content | ReactNode | — | Tooltip content. |
children
ReactNode
Default: —
The trigger element the tooltip attaches to.
content
ReactNode
Default: —
Tooltip content.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | md | Tooltip size. |
color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | default | Semantic color. |
colorDepth | number | 100 | Shade depth for the selected color. |
radius | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full" | md | Border radius. |
shadow | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | sm | Box-shadow depth. |
showArrow | boolean | false | Shows a pointing arrow. |
triggerScaleOnOpen | boolean | false | Slightly scales the trigger while the tooltip is open. |
size
"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"
Default: md
Tooltip size.
color
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger"
Default: default
Semantic color.
colorDepth
number
Default: 100
Shade depth for the selected color.
radius
"none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full"
Default: md
Border radius.
shadow
"none" | "xs" | "xs-sm" | "sm" | "md" | "lg"
Default: sm
Box-shadow depth.
showArrow
boolean
Default: false
Shows a pointing arrow.
triggerScaleOnOpen
boolean
Default: false
Slightly scales the trigger while the tooltip is open.
| Prop | Type | Default | Description |
|---|---|---|---|
placement | "top" | "bottom" | "left" | "right" | ... (12-way) | top | Position relative to the trigger. |
offset | number | 7 | Distance from the trigger. |
containerPadding | number | 12 | Minimum distance kept from the viewport edge. |
crossOffset | number | 0 | Offset along the cross axis. |
shouldFlip | boolean | true | Flips placement to stay in the viewport. |
portalContainer | Element | DocumentFragment | null | — | Custom portal mount target. |
placement
"top" | "bottom" | "left" | "right" | ... (12-way)
Default: top
Position relative to the trigger.
offset
number
Default: 7
Distance from the trigger.
containerPadding
number
Default: 12
Minimum distance kept from the viewport edge.
crossOffset
number
Default: 0
Offset along the cross axis.
shouldFlip
boolean
Default: true
Flips placement to stay in the viewport.
portalContainer
Element | DocumentFragment | null
Default: —
Custom portal mount target.
| Prop | Type | Default | Description |
|---|---|---|---|
delay | number | 0 | Open delay in ms. |
closeDelay | number | 500 | Close delay in ms (also floors touch-triggered opens). |
isOpen | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Uncontrolled initial open state. |
isKeyboardDismissDisabled | boolean | false | Disables closing via Escape. |
isDismissable | boolean | false | Allows dismissing an isOpen-controlled tooltip via outside click/Escape. |
shouldCloseOnBlur | boolean | true | Closes when the trigger loses focus. |
shouldCloseOnInteractOutside | (element: HTMLElement) => boolean | — | Custom predicate for outside-interaction dismissal. |
isDisabled | boolean | false | Disables the tooltip entirely. |
delay
number
Default: 0
Open delay in ms.
closeDelay
number
Default: 500
Close delay in ms (also floors touch-triggered opens).
isOpen
boolean
Default: —
Controlled open state.
defaultOpen
boolean
Default: false
Uncontrolled initial open state.
isKeyboardDismissDisabled
boolean
Default: false
Disables closing via Escape.
isDismissable
boolean
Default: false
Allows dismissing an isOpen-controlled tooltip via outside click/Escape.
shouldCloseOnBlur
boolean
Default: true
Closes when the trigger loses focus.
shouldCloseOnInteractOutside
(element: HTMLElement) => boolean
Default: —
Custom predicate for outside-interaction dismissal.
isDisabled
boolean
Default: false
Disables the tooltip entirely.
| Prop | Type | Default | Description |
|---|---|---|---|
disableAnimation | boolean | false | Disables the enter/exit animation. |
disableAnimation
boolean
Default: false
Disables the enter/exit animation.
| Prop | Type | Default | Description |
|---|---|---|---|
onOpenChange | (isOpen: boolean) => void | — | Called when open state changes. |
onClose | () => void | — | Called when the tooltip closes. |
onOpenChange
(isOpen: boolean) => void
Default: —
Called when open state changes.
onClose
() => void
Default: —
Called when the tooltip closes.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Class applied to the tooltip content. |
classNames | { base?; content?; arrow? } | — | Per-slot class overrides. |
className
string
Default: —
Class applied to the tooltip content.
classNames
{ base?; content?; arrow? }
Default: —
Per-slot class overrides.
