Tooltip
Tooltip component displays informative text when users hover over or focus on an element.
Playground
Experiment with all the properties of the Tooltip component in real time.
Properties
content
The content to display inside the tooltip.
offset
Distance in pixels between tooltip and target.
delayShow
Delay before showing the tooltip.
delayHide
Delay before hiding the tooltip.
color
Color scheme of the tooltip.
position
Position of the tooltip relative to the target.
disabled
If true, the tooltip will not appear.
Positions
Tooltip supports 8 different positions: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right, left-center, and right-center.
Colors
Tooltip supports all color variants from the theme.
With Delay
Control when the tooltip appears and disappears using delayShow and delayHide props.
Disabled
Disable the tooltip using the disabled prop.
API Reference
Props
Prop | Default | Type |
|---|---|---|
content | undefined | ReactNode |
children | undefined | ReactElement |
position | "top-center" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left-center" | "right-center" |
color | "secondary" | "neutral" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" |
delayShow | 100 | number |
delayHide | 100 | number |
offset | 8 | number |
disabled | false | boolean |
ariaLabel | undefined | string |