Overview
The Tooltip component is designed to provide additional information or context about an element when a user hovers over it. Tooltips are commonly used to enhance user experience by offering explanations, tips, or details without cluttering the interface. They are particularly useful for icons, buttons, and other interactive elements where space is limited.
Variants
The tooltip component offers two visual variants to suit different design contexts:
- Plain: A minimal tooltip with a dark background and small text
- Rich: A more prominent tooltip with structured content with a header, body, and an optional action button
Positions
The Tooltip component supports four different positions relative to the trigger element:
- Top: Displays above the element (default)
- Bottom: Displays below the element
- Left: Displays to the left of the element
- Right: Displays to the right of the element
Delay Configuration
You can customize the delay before the tooltip appears by setting the delay prop. This is useful for preventing tooltips from appearing too quickly during normal navigation.
Disabled State
Tooltips can be disabled when they're not needed, such as when an element is disabled or when the tooltip would not provide useful information.
Multiple Actions
Rich tooltips can support multiple action buttons, allowing for more complex interactions. You can specify different button variants for each action.
API Reference
Tooltip
A contextual popup component that provides additional information when hovering over an element.
Props
| Name | Type | Default | Description |
|---|---|---|---|
text | string | Required | The main content text to display in the tooltip |
position | "top" | "bottom" | "left" | "right" | "top" | Position of the tooltip relative to the trigger element |
variant | "plain" | "rich" | "plain" | Visual style of the tooltip |
delay | number | 200 | Delay in milliseconds before showing the tooltip |
disabled | boolean | false | Whether to disable the tooltip functionality |
children | React.ReactNode | Required | The trigger element that activates the tooltip |
Rich Variant Props
These props are only applicable when variant="rich":
| Name | Type | Default | Description |
|---|---|---|---|
header | string | undefined | Optional header text for rich tooltips |
actions | TooltipAction[] | undefined | Array of action buttons for rich tooltips |
TooltipAction
| Name | Type | Default | Description |
|---|---|---|---|
label | string | Required | Text to display on the action button |
onClick | () => void | Required | Function called when the action button is clicked |
variant | "text" | "outlined" | "filled" | "text" | Visual style of the action button |
Inherited Props
The Tooltip component accepts all standard HTML div element props on the trigger container.