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
booleantrueboundary
boundaryThe boundary area for the popper. Used within the preventOverflow modifier
HTMLElement | "clippingParents" | "scrollParent""clippingParents"children
childrenThe content of the popover. It is usually the PopoverTrigger,
and PopoverContent
MaybeRenderProp<{ isOpen: boolean; onClose: () => void; forceUpdate: (() => void); }>closeDelay
closeDelaynumber200closeOnBlur
closeOnBlurIf true, the popover will close when you blur out it by
clicking outside or tabbing out
booleantruecloseOnEsc
closeOnEscIf true, the popover will close when you hit the Esc key
booleantruecolorScheme
colorSchemeColor Schemes for Popover are not implemented in the default theme. You can extend the theme to implement them.
stringcomputePositionOnMount
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.
boolean | { scroll?: boolean; resize?: boolean; } | undefinedtrueflip
flipIf true, the popper will change its placement and flip when it's
about to overflow its boundary area.
booleantruegutter
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. @see Docs https://popper.js.org/docs/v2/modifiers/
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
(() => void)onOpen
onOpenCallback fired when the popover opens
(() => void)openDelay
openDelaynumber200orientation
orientation"horizontal" | "vertical"placement
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.
booleantruereturnFocusOnClose
returnFocusOnCloseIf true, focus will be returned to the element that triggers the popover
when it closes
booleantruesize
sizeSizes for Popover are not implemented in the default theme. You can extend the theme to implement them.
stringstrategy
strategyThe CSS positioning strategy to use.
"fixed" | "absolute""absolute"styleConfig
styleConfigRecord<string, any>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"variant
variantVariants for Popover are not implemented in the default theme. You can extend the theme to implement them.
stringOther Props#
PopoverContentcomposesBoxand has the ability to smartly position itself. Thanks to popper.js.PopoverArrow,PopoverHeader,PopoverFooterandPopoverBodycomposesBox.PopoverCloseButtoncomposesBoxcomponent.