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

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)
      Show all

Learn more about how to customize in the Theme documentation.

API

PropDescriptionDefault
disablePaddingDisable default padding on popover.
boolean
popoverStylePopover css styles.
StyleHTMLAttributes<any>
popoverClassNamePopover classname.
string
themeTheme for the Popover.
PopoverTheme
autoFocusPopover 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.
FocusTargetOrFalse | (() => void)
childrenContent to wrap.
ReactNode
closeOnClickClose on any click.
boolean
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
enterDelayDelay before showing tooltip.
number
leaveDelayDelay before closing tooltip.
number
200
modifiersfloating-ui modifiers.
any
visibleExternal setter for visibility.
boolean
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[]
click
disabledWhether the tooltip is disabled.
boolean
followCursorWhether the tooltip should move with the cursor or not.
boolean
pointerEventsAdd pointer events or not. Usually not for tooltips.
string
isPopoverDifferentiator for popovers to be handled separate from tooltips
boolean
onOpenTooltip was opened.
() => void
onCloseTooltip was closed.
() => void