Tooltip
Lightweight descriptions that stay pinned to their trigger with precise positioning and accessibility baked in.
Anatomy
Import the parts you need and compose them freely.
API Reference
Root
Handles both controlled and uncontrolled open state, wires scroll/outside click/ESC dismissal, and connects Floating UI positioning.
| Prop | Type | Default |
|---|---|---|
| open | boolean | - |
| defaultOpen | boolean | false |
| onOpenChange | function | - |
| placement | "top" | "bottom" | "left" | "right" | "right" |
| offset | number | 8 |
| closeOnScroll | boolean | true |
| closeOnOutside | boolean | true |
| closeOnEscape | boolean | true |
| disabled | boolean | false |
| Data Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
| data-disabled | "" |
Trigger
Interactive button that toggles the tooltip on click and automatically closes on blur.
| Prop | Type | Default |
|---|---|---|
| type | string | button |
| onClick | function | - |
Content
Renders inside a portal, can stay mounted with
forceMount, exposes data-state and data-positioned for animation control, and closes itself on click.| Prop | Type | Default |
|---|---|---|
| forceMount | boolean | false |
| container | Element | DocumentFragment | null | document.body |
| Data Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
| data-placement | "top" | "bottom" | "left" | "right" |
| data-positioned | "" |