Tooltip
The Tooltip component displays additional information when a user hovers or focuses on a trigger element.
Usage
Default
<Tooltip content="Tooltip message" position="top">
<Button>Hover me</Button>
</Tooltip>Props
| Type | Description | |
|---|---|---|
| aria-label | string | Accessible label applied to the tooltip itself. Use when the tooltip needs an explicit accessible name. |
| aria-labelledby | string | Accessible labelling reference for the tooltip itself. |
| children | ReactNode | The element that triggers the tooltip. |
| content | string | The content text displayed inside the tooltip. |
| data-testid | string | Optional test ID for testing frameworks. |
| id | string | Optional custom id for the tooltip element. If omitted, a stable generated id is used. |
| keepMountedWhenHidden | boolean | Whether the tooltip should remain in the accessibility tree when hidden. Defaults to false behavior via aria-hidden. |
| position | "left" | "right" | "top" | "bottom" | The position of the tooltip relative to the target element. "top" | "bottom" | "left" | "right" |
| rounding | RoundingType | Rounding style of the tooltip. "none" | "small" | "medium" | "large" | "full" |
| shadow | ShadowType | Shadow style of the tooltip. "none" | "light" | "medium" | "strong" | "intense" |
| state | StateType | State of the tooltip for visual feedback. "success" | "error" | "warning" | "disabled" | "" |
| theme | ThemeType | Theme style of the tooltip. "primary" | "secondary" | "tertiary" | "quaternary" | "clear" |
| triggerAriaDescribedBy | string | Additional describedby ids to keep on the trigger element alongside the tooltip id when visible. |
| triggerAriaLabel | string | Accessible label applied to the trigger element. Helpful when the trigger has no visible text or icon-only content. |
| triggerAriaLabelledBy | string | Accessible labelledby reference applied to the trigger element. |
| triggerId | string | Optional id for the trigger element. |