Popover

Popover is a component that floats around its anchor element. It's commonly used for building other components such as dropdowns, tooltips, combobox, etc.

Edit the code below to see your changes live!

API

Popover

Prop Name
Type
Default
Description
anchorElement *Element | null

Element to be used as an anchor for the Popover.

isOpen *boolean

Specifies if the Popover is open or closed.

label *string

Label used for accessibility purposes, this label will be set as an aria-label on the popover.

closeOnClickOutsidebooleantrue

Determines if onClose gets called when clicking outside of the popover.

closeOnEscKeybooleantrue

Determines if onClose gets called when pressing the Esc key.

matchAnchorElementWidthbooleanfalse

If set to true, the Popover will have the same width as its anchor element.

skiddingnumber0

Determines the offset along the anchorElement.

distancenumber4

Determines the offset away from the anchorElement.

onClose() => void

Callback that runs when the popover should close.

placementauto | auto-end | auto-start | bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-startauto

Sets the position of the Popover.

Props ending with * are required

Inherited Props

Expand

Box Props

Expand

Padding Props

Beta