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

Custom Animation

Define custom animations for the tooltip, using the animation, animationViewChange props:

Learn more about how to customize the animations in the Custom Animations section.

Theme

This component uses the following default theme:

root{}(3 keys)

Learn more about how to customize in the Theme documentation.

API

Name	Type	Default
`children`	`ReactNode` Content to wrap.
`closeOnClick`	`boolean` Close on any click.	`false`
`closeOnBodyClick`	`boolean` Close when the body is clicked.	`true`
`closeOnEscape`	`boolean` Close when escape key is triggered.	`true`
`content`	`any` Content for the tooltip.
`reference`	`any` Reference of the tooltip to align to.
`placement`	`Placement` floating-ui placement.	`'top'`
`enterDelay`	`number` Delay before showing tooltip.	`0`
`leaveDelay`	`number` Delay before closing tooltip.	`200`
`modifiers`	`Modifiers` floating-ui modifiers.
`visible`	`boolean` External setter for visibility.	`false`
`className`	`string` Additional CSS classnames.
`triggerClassName`	`string` CSS Classname for the tooltip container ( ie. the thing that the tooltip is bound to ).
`trigger`	`TriggerTypes \| TriggerTypes[]` How the tooltip will be triggered.	`'hover'`
`disabled`	`boolean` Whether the tooltip is disabled.	`false`
`animated`	`boolean` Deprecated: Use animation configuration instead. Whether the tooltip is animated.	`true`
`animation`	`MotionNodeAnimationOptions` Animation configuration for the tooltip.
`followCursor`	`boolean` Whether the tooltip should move with the cursor or not.	`false`
`pointerEvents`	`string` Add pointer events or not. Usually not for tooltips.	`'none'`
`arrow`	`ReactNode` Arrow pointing from the tooltip to the trigger element. Pass `true` to render the default arrow, or a ReactNode to render a custom arrow.
`isPopover`	`boolean` Differentiator for popovers to be handled separate from tooltips
`onOpen`	`() => void` Tooltip was opened.
`onClose`	`() => void` Tooltip was closed.
`theme`	`TooltipTheme` Theme for the tooltip.