useXDSTooltip@xds/core · Tooltip
Usage
Headless hook for hover/focus-triggered tooltips. Builds on useXDSLayer with hover intent, delay, and accessible aria-describedby linking. Use for custom trigger elements that need tooltip behavior.Best practices
| Guidance | Practices |
|---|---|
| Do | Use for brief text labels that describe a UI element — icon buttons, truncated text, abbreviations. |
| Do | Prefer the XDSTooltip component for standard wrapping — use the hook when the trigger is not a simple child. |
| Don't | Put interactive content (links, buttons) inside tooltips — use Popover or HoverCard instead. |
Parameters
| Param | Type | Description |
|---|---|---|
contentrequired | ReactNode | Text or content to display in the tooltip. |
placement | LayerPlacement (default: 'above') | Position relative to the trigger. |
alignment | LayerAlignment (default: 'center') | Alignment along the placement axis. |
delayMs | number (default: 300) | Delay before showing the tooltip on hover. |
Returns
| Field | Type | Description |
|---|---|---|
| triggerProps | object | Props to spread on the trigger element (ref, aria-describedby, event handlers). |
| layerNode | ReactNode | The tooltip layer to render (include in JSX output). |
Import
ts