v0.27.0
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!
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. |
closeOnClickOutside | boolean | true | Determines if |
closeOnEscKey | boolean | true | Determines if |
matchAnchorElementWidth | boolean | false | If set to true, the Popover will have the same width as its anchor element. |
skidding | number | 0 | Determines the offset along the anchorElement. |
distance | number | 4 | Determines the offset away from the anchorElement. |
onClose | () => void |
| Callback that runs when the popover should close. |
placement | auto | auto-end | auto-start | bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-start | auto | Sets the position of the Popover. |
Props ending with * are required
Box Props
Padding Props