Docs
πŸ—οΈ ⏐ Components
Layers
Tooltip

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

PropDescriptionDefault
childrenContent to wrap.
ReactNode
closeOnClickClose on any click.
boolean
false
closeOnBodyClickClose when the body is clicked.
boolean
true
closeOnEscapeClose when escape key is triggered.
boolean
true
contentContent for the tooltip.
any
referenceReference of the tooltip to align to.
any
placementfloating-ui placement.
Placement
top
enterDelayDelay before showing tooltip.
number
0
leaveDelayDelay before closing tooltip.
number
200
modifiersfloating-ui modifiers.
any
visibleExternal setter for visibility.
boolean
false
classNameAdditional CSS classnames.
string
triggerClassNameCSS Classname for the tooltip container ( ie. the thing that the tooltip is bound to ).
string
triggerHow the tooltip will be triggered.
TriggerTypes | TriggerTypes[]
hover
disabledWhether the tooltip is disabled.
boolean
false
followCursorWhether the tooltip should move with the cursor or not.
boolean
false
pointerEventsAdd pointer events or not. Usually not for tooltips.
string
none
isPopoverDifferentiator for popovers to be handled separate from tooltips
boolean
onOpenTooltip was opened.
() => void
onCloseTooltip was closed.
() => void
themeTheme for the tooltip.
TooltipTheme