Popover

Popover is a non-modal dialog that floats around a trigger.

    SourceTheme source@chakra-ui/popover

Props#

Popover Props#

arrowPadding

Description

The padding required to prevent the arrow from reaching the very edge of the popper.

Type
number
Default
8

arrowShadowColor

Description

The `box-shadow` of the popover arrow

Type
string

arrowSize

Description

The size of the popover arrow

Type
number

autoFocus

Description

If true, focus will be transferred to the first interactive element when the popover opens

Type
boolean
Default
true

boundary

Description

The boundary area for the popper. Used within the preventOverflow modifier

Type
HTMLElement | "clippingParents" | "scrollParent"
Default
"clippingParents"

children

Description

The content of the popover. It is usually the PopoverTrigger, and PopoverContent

Type
MaybeRenderProp<{ isOpen: boolean; onClose: () => void; forceUpdate: (() => void); }>

closeDelay

Type
number
Default
200

closeOnBlur

Description

If true, the popover will close when you blur out it by clicking outside or tabbing out

Type
boolean
Default
true

closeOnEsc

Description

If true, the popover will close when you hit the Esc key

Type
boolean
Default
true

colorScheme

Description

Color Schemes for Popover are not implemented in the default theme. You can extend the theme to implement them.

Type
(string & {})

computePositionOnMount

Description

If 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.

Type
boolean

defaultIsOpen

Description

If true, the popover will be initially opened.

Type
boolean

direction

Description

Theme direction ltr or rtl. Popper's placement will be set accordingly

Type
"ltr" | "rtl"
Default
"ltr"

eventListeners

Description

If provided, determines whether the popper will reposition itself on scroll and resize of the window.

Type
boolean | { scroll?: boolean; resize?: boolean; } | undefined
Default
true

flip

Description

If true, the popper will change its placement and flip when it's about to overflow its boundary area.

Type
boolean
Default
true

gutter

Description

The 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.

Type
number
Default
8

id

Description

The 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

Type
string

initialFocusRef

Description

The ref of the element that should receive focus when the popover opens.

Type
RefObject<FocusableElement>

isLazy

Description

Performance 🚀: If true, the PopoverContent rendering will be deferred until the popover is open.

Type
boolean

isOpen

Description

If true, the popover will be opened in controlled mode.

Type
boolean

lazyBehavior

Description

Performance 🚀: 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.

Type
LazyBehavior
Default
"unmount"

matchWidth

Description

If true, the popper will match the width of the reference at all times. It's useful for autocomplete, `date-picker` and select patterns.

Type
boolean

modifiers

Description

Array 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/

Type
Partial<Modifier<string, any>>[]

offset

Description

The main and cross-axis offset to displace popper element from its reference element.

Type
[number, number]

onClose

Description

Callback fired when the popover closes

Type
(() => void)

onOpen

Description

Callback fired when the popover opens

Type
(() => void)

openDelay

Type
number
Default
200

orientation

Type
"horizontal" | "vertical"

placement

Description

The placement of the popper relative to its reference.

Type
PlacementWithLogical
Default
"bottom"

preventOverflow

Description

If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.

Type
boolean
Default
true

returnFocusOnClose

Description

If true, focus will be returned to the element that triggers the popover when it closes

Type
boolean
Default
true

size

Description

Sizes for Popover are not implemented in the default theme. You can extend the theme to implement them.

Type
string

strategy

Description

The CSS positioning strategy to use.

Type
"fixed" | "absolute"
Default
"absolute"

styleConfig

Type
Dict<any>

trigger

Description

The 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

Type
"click" | "hover"
Default
"click"

variant

Description

Variants for Popover are not implemented in the default theme. You can extend the theme to implement them.

Type
string

Other Props#

  • PopoverContent composes Box and has the ability to smartly position itself. Thanks to popper.js.
  • PopoverArrow, PopoverHeader, PopoverFooter and PopoverBody composes Box.
  • PopoverCloseButton composes Box component.
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel