useXDSHoverCard@xds/core · HoverCard
Usage
Headless hook for hover-triggered floating cards. Builds on useXDSLayer with hover/focus intent detection, delay, and safe triangle hover zones. Use for rich previews on hover without building the interaction logic.Best practices
| Guidance | Practices |
|---|---|
| Do | Use for rich content previews (user profiles, link previews) that benefit from hover interaction. |
| Do | Prefer the XDSHoverCard component for standard cases — use the hook when you need full control over rendering. |
| Don't | Use for simple text hints — use XDSTooltip or useXDSTooltip instead. |
Parameters
| Param | Type | Description |
|---|---|---|
contentrequired | ReactNode | ((props: ContextRenderProps) => ReactNode) | Content to display in the hover card. Can be a render function receiving layer props. |
placement | LayerPlacement (default: 'below') | Position relative to the trigger. |
alignment | LayerAlignment (default: 'center') | Alignment along the placement axis. |
delayMs | number (default: 300) | Delay before showing the hover card on hover. |
onShow | () => void | Callback fired when the hover card becomes visible. |
onHide | () => void | Callback fired when the hover card is hidden. |
Returns
| Field | Type | Description |
|---|---|---|
| triggerProps | object | Props to spread on the trigger element (ref, event handlers). |
| layerNode | ReactNode | The hover card layer to render (include in JSX output). |
Import
ts