Popover

An element that pops up from another element over other content; it differs from a tooltip in that it is usually triggered via click instead of hover and can contain interactive elements.

Examples

Theme

This component uses the following default theme:

root{}(2 keys)

Learn more about how to customize in the Theme documentation.

API

Name	Type	Default
`disablePadding`	`boolean` Disable default padding on popover.
`popoverStyle`	`StyleHTMLAttributes<any>` Popover css styles.
`popoverClassName`	`string` Popover classname.
`theme`	`PopoverTheme` Theme for the Popover.
`autoFocus`	`FocusTargetOrFalse \| (() => void) \| undefined` Popover has a focus trap that by default focuses the first element in the tab order. With this option you can specify a different element to receive that initial focus, or use false for no initially focused element.
`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.