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
| Prop | Type | Default | Description |
|---|---|---|---|
| content | string | - | The message displayed inside the tooltip. |
| position | "top" | "bottom" | "left" | "right" | "top" | Tooltip position relative to the trigger element. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Visual theme of the tooltip. |
| state | "success" | "error" | "warning" | - | Semantic state for styling. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Border radius for the tooltip container. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Shadow effect applied to the tooltip container. |
| children | ReactNode | - | The trigger element (e.g., a button, icon, or text) that shows the tooltip. |
| className | string | - | Custom class name(s) for the tooltip container. |
| data-testid | string | "tooltip" | Test ID for the tooltip container. |