usePopover API

API reference docs for theusePopovercomponent. For examples and details on the usage of this component, visit the component demo page.

Props​

Props

Type

Description

Default

isOpen?

boolean

When true, the popover element is open. Required when using the isPopoverAlwaysMounted option.

_

isPopoverAlwaysMounted?

boolean

Set this value to true when the popover remains mounted but is visually hidden with CSS when the popover is closed.

false

matchReferenceWidth?

boolean

When true, the popover element will match the width of the reference element.

_

maxHeight?

number

The maximum height of the popover, by default Popover comes with overflow hidden, make sure you have scrollable styles when content overflows from maxHeight.

_

maxWidth?

number

The maximum width of the popover, by default Popover tries to take remaining space of relative parent width, when you restrict content width ensure you are also wrapping content with ellipses.

_

offset?

number

Distance between the reference element and popover element in pixels.

_

placement?

'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'

Placement of the popover relative to the reference.

bottom-start

strategy?

'fixed' | 'absolute'

The strategy used to position the floating element.

absolute