Tooltip
Show a short explanation when someone hovers over or focuses an element with a tooltip.
Examples
Breakpoints
Mobile
320pxMobile Lg
480pxTablet
640pxDesktop
1024pxtooltip-demo.tsx
Component API
Use Root with Trigger and Content, or the Tooltip convenience component for a single trigger.
Root<div>
Owns the tooltip state and text.
| Prop | Type | Default | Description |
|---|---|---|---|
content | string (required) | — | Text shown in the tooltip. |
position | Tooltip position | top | Preferred placement. |
defaultOpen | boolean | — | Initially open state. |
open | boolean | — | Controlled open state. |
onOpenChange | ({ open: boolean }) => void | — | Receives requested open-state changes. |
ids | { root?: string; trigger?: string; content?: string } | — | Overrides generated part IDs. Use Root IDs when a label or external control needs a stable input or trigger target. |
Escape dismisses an open tooltip. In controlled mode, update open after onOpenChange requests dismissal.
Trigger
Clones its single child element and adds tooltip trigger behavior.
Content<div>
Displays the tooltip text.
| Attribute | Value | Purpose |
|---|---|---|
data-state | open | closed | Style the open and closed states. |
data-placement | top | bottom | left | right | Positions the tooltip. |
data-visible | Present after opening transition | Styles the visible state. |
Tooltip
Convenience wrapper around Root, Trigger, and Content.
| Prop | Type | Default | Description |
|---|---|---|---|
content | string (required) | — | Tooltip text. |
position | Tooltip position | top | Preferred placement. |
Accessibility
Make the trigger keyboard reachable and name the trigger independently of the tooltip content.