A component that displays information related to an element when the element receives keyboard focus or the mouse hovers over it
Tooltip exports 4 components that combine to create our tooltip. The Tooltip.Trigger requires a React component child (or passed to as) to allow the necessary event bindings and accessible properties to be cloned.
Also, note that the component must accept a ref.
Tooltip.Provider is required to avoid regressions and should be included at the root level of the application.
Read more about the underlying UI component on the Radix UI documentation site.
<Tooltip.Provider><Tooltip><Tooltip.Trigger><Text>Hover on me</Text></Tooltip.Trigger><Tooltip.Content>This is the tooltip content, hello</Tooltip.Content></Tooltip></Tooltip.Provider>
API Reference
Tooltip
| Prop | Type | Default | Required |
|---|---|---|---|
open | boolean | - | - |
defaultOpen | boolean | - | - |
onOpenChange | (open: boolean) => void | - | - |
delayDuration | number | 350 | - |
disableHoverableContent | boolean | - | - |
Tooltip.Content
| Prop | Type | Default | Required |
|---|---|---|---|
aria-label | string | - | - |
asChild | boolean | - | - |
side | "bottom" | "left" | "right" | "top" | top | - |
sideOffset | number | 4 | - |
align | "center" | "end" | "start" | - | - |
alignOffset | number | - | - |
arrowPadding | number | - | - |
collisionBoundary | null | Element | Boundary[] | - | - |
collisionPadding | number | Partial<Record<"bottom" | "left" | "right" | "top", number>> | - | - |
sticky | "always" | "partial" | - | - |
hideWhenDetached | boolean | - | - |
avoidCollisions | boolean | - | - |
forceMount | true | - | - |
onEscapeKeyDown | (event: KeyboardEvent) => void | - | - |
onPointerDownOutside | (event: PointerDownOutsideEvent) => void | - | - |
size | "sm" | "md" | "lg" | md | - |
css | CSSProperties | - | - |