The padding required to prevent the arrow from reaching the very edge of the popper.
Popover
Popover is a non-modal dialog that floats around a trigger.
Props#
Popover Props#
arrowPadding
arrowPaddingnumber8arrowShadowColor
arrowShadowColorThe `box-shadow` of the popover arrow
stringarrowSize
arrowSizeThe size of the popover arrow
numberautoFocus
autoFocusIf true, focus will be transferred to the first interactive element
when the popover opens
booleanboundary
boundaryThe boundary area for the popper. Used within the preventOverflow modifier
"clippingParents" | "scrollParent" | HTMLElement"clippingParents"closeDelay
closeDelaynumber200closeOnBlur
closeOnBlurIf true, the popover will close when you blur out it by
clicking outside or tabbing out
booleancloseOnEsc
closeOnEscIf true, the popover will close when you hit the Esc key
booleancomputePositionOnMount
computePositionOnMountIf true, the popover will be positioned when it mounts
(even if it's not open)
Note 🚨: We don't recommend using this in a popover/menu intensive UI or page
as it might affect scrolling performance.
booleandefaultIsOpen
defaultIsOpenIf true, the popover will be initially opened.
booleandirection
directionTheme direction ltr or rtl. Popper's placement will
be set accordingly
"ltr" | "rtl""ltr"eventListeners
eventListenersIf provided, determines whether the popper will reposition itself on scroll
and resize of the window.
type ONLY_FOR_FORMAT =
| boolean
| { scroll?: boolean | undefined resize?: boolean | undefined };flip
flipIf true, the popper will change its placement and flip when it's
about to overflow its boundary area.
booleangutter
gutterThe distance or margin between the reference and popper.
It is used internally to create an offset modifier.
NB: If you define offset prop, it'll override the gutter.
number8id
idThe html id attribute of the popover.
If not provided, we generate a unique id.
This id is also used to auto-generate the `aria-labelledby`
and `aria-describedby` attributes that points to the PopoverHeader and PopoverBody
stringinitialFocusRef
initialFocusRefThe ref of the element that should receive focus when the popover opens.
RefObject<{ focus(): void }>isLazy
isLazyPerformance 🚀:
If true, the PopoverContent rendering will be deferred
until the popover is open.
booleanisOpen
isOpenIf true, the popover will be opened in controlled mode.
booleanlazyBehavior
lazyBehaviorPerformance 🚀: The lazy behavior of popover's content when not visible. Only works when `isLazy={true}` - "unmount": The popover's content is always unmounted when not open. - "keepMounted": The popover's content initially unmounted, but stays mounted when popover is open.
LazyMode"unmount"matchWidth
matchWidthIf true, the popper will match the width of the reference at all times.
It's useful for autocomplete, `date-picker` and select patterns.
booleanmodifiers
modifiersArray of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.
Partial<Modifier<string, any>>[]offset
offsetThe main and cross-axis offset to displace popper element from its reference element.
[number, number]onClose
onCloseCallback fired when the popover closes
() => voidonOpen
onOpenCallback fired when the popover opens
() => voidopenDelay
openDelaynumber200placement
placementThe placement of the popper relative to its reference.
PlacementWithLogical"bottom"preventOverflow
preventOverflowIf true, will prevent the popper from being cut off and ensure
it's visible within the boundary area.
booleanreturnFocusOnClose
returnFocusOnCloseIf true, focus will be returned to the element that triggers the popover
when it closes
booleanstrategy
strategyThe CSS positioning strategy to use.
"absolute" | "fixed""absolute"trigger
triggerThe interaction that triggers the popover.
hover - means the popover will open when you hover with mouse or
focus with keyboard on the popover trigger
click - means the popover will open on click or
press Enter to Space on keyboard
"click" | "hover""click"Other Props#
PopoverContentcomposesBoxand has the ability to smartly position itself. Thanks to popper.js.PopoverArrow,PopoverHeader,PopoverFooterandPopoverBodycomposesBox.PopoverCloseButtoncomposesBoxcomponent.