Tooltip displays contextual information when users hover over, focus on, or tap an element. Supports color, position, and programmatic control.
The Tooltip components include the following:
The main Tooltip wrapper. Controls appearance, color, and position.
| Tooltip Props | Type | Description |
|---|---|---|
tip | string | number | The tooltip label to display. If omitted, use a TooltipContent child instead. |
open | boolean | Controls whether the tooltip is visible. Useful for manual control. |
color | string | Sets the color of the tooltip to one of the below props. |
| neutral | boolean | Sets the color to neutral. |
| primary | boolean | Sets the color to primary. |
| secondary | boolean | Sets the color to secondary. |
| accent | boolean | Sets the color to accent. |
| info | boolean | Sets the color to info. |
| success | boolean | Sets the color to success. |
| warning | boolean | Sets the color to warning. |
| error | boolean | Sets the color to error. |
position | string | Sets the tooltip position to one of the below props. |
| top | boolean | Sets the position to top. |
| right | boolean | Sets the position to right. |
| bottom | boolean | Sets the position to bottom. |
| left | boolean | Sets the position to left. |
| Tooltip Slots | Description |
|---|---|
default | The default slot for Tooltip content. Place the trigger element here (button, icon, etc). If no |
Contains custom tooltip content. Use when you need more than just a string label (e.g. icons, formatting).
Control the open state programmatically.
Use the position attribute or shortcut props (top, bottom, left, right) to specify tooltip direction.
Apply color styles to the tooltip using props like neutral, primary, secondary, accent, info, success, warning, or error.
Color can be distinct from the target.
Use the TooltipContent component in a named slot to display rich, custom tooltip content.