Tooltip
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Tooltip } from "@corew500/ui/tooltip"
<Tooltip>Content</Tooltip>CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultOpen | enum | false | Whether the tooltip is initially open. To render a controlled tooltip, use the `open` prop instead. |
| open | enum | — | Whether the tooltip is currently open. |
| onOpenChange | (open: boolean, eventDetails: TooltipRootChangeEventDetails) => void | — | Event handler called when the tooltip is opened or closed. |
| onOpenChangeComplete | (open: boolean) => void | — | Event handler called after any animations complete when the tooltip is opened or closed. |
| disableHoverablePopup | enum | false | Whether the tooltip contents can be hovered without closing the tooltip. |
| trackCursorAxis | enum | 'none' | Determines which axis the tooltip should track the cursor on. |
| actionsRef | RefObject<TooltipRootActions> | — | A ref to imperative actions. - `unmount`: Unmounts the tooltip popup. - `close`: Closes the tooltip imperatively when called. |
| disabled | enum | false | Whether the tooltip is disabled. |
| handle | TooltipHandle<unknown> | — | A handle to associate the tooltip with a trigger. If specified, allows external triggers to control the tooltip's open state. Can be created with the Tooltip.createHandle() method. |
| triggerId | string | — | ID of the trigger that the tooltip is associated with. This is useful in conjunction with the `open` prop to create a controlled tooltip. There's no need to specify this prop when the tooltip is uncontrolled (i.e. when the `open` prop is not set). |
| defaultTriggerId | string | — | ID of the trigger that the tooltip is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open tooltip. |
Accessibility
Focus Management
- Manages focus and hover states across tooltip group
Screen Readers
- - Coordinates ARIA relationships for all child tooltips
Localization
Translatable Content
- - All TooltipContent children should be pre-translated text
- Tooltip text should be brief and descriptive
Additional
- Avoid complex markup inside tooltips for better screen reader compatibility