Tooltip
A Tooltip is a small, informative pop-up that provides context, explanations, or additional details when a user hovers over or interacts with specific elements in a user interface.
Examples
Basic
Disabled
Theme
This component uses the following default theme:
- root{}(2 keys)
- Show all
Learn more about how to customize in the Theme documentation.
API
| Prop | Description | Default |
|---|---|---|
children | Content to wrap.ReactNode | |
closeOnClick | Close on any click.boolean | false |
closeOnBodyClick | Close when the body is clicked.boolean | true |
closeOnEscape | Close when escape key is triggered.boolean | true |
content | Content for the tooltip.any | |
reference | Reference of the tooltip to align to.any | |
placement | floating-ui placement.Placement | top |
enterDelay | Delay before showing tooltip.number | 0 |
leaveDelay | Delay before closing tooltip.number | 200 |
modifiers | floating-ui modifiers.Modifiers | |
visible | External setter for visibility.boolean | false |
className | Additional CSS classnames.string | |
triggerClassName | CSS Classname for the tooltip container ( ie. the thing that the tooltip is bound to ).string | |
trigger | How the tooltip will be triggered.TriggerTypes | TriggerTypes[] | hover |
disabled | Whether the tooltip is disabled.boolean | false |
followCursor | Whether the tooltip should move with the cursor or not.boolean | false |
pointerEvents | Add pointer events or not. Usually not for tooltips.string | none |
isPopover | Differentiator for popovers to be handled separate from tooltipsboolean | |
onOpen | Tooltip was opened.() => void | |
onClose | Tooltip was closed.() => void | |
theme | Theme for the tooltip.TooltipTheme |