Popover
Examples
Popover Props
The Popover component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| position | enum: top, bottom, left, right | 'top' | Popover position | |
| enableFlip | bool | true | If true, tries to keep the popover in view by flipping it if necessary | |
| className | string | null | Popover additional class | |
| children | element | The reference element to which the popover is relatively placed to | ||
| aria-label | custom | '' | Accessible label, required when header is not present | |
| headerContent | node | null | Header content, leave empty for no header | |
| bodyContent | node | Body content | ||
| isVisible | bool | null | True to show the popover programmatically. Used in conjunction with the shouldClose prop. By default, the popover child element handles click events automatically. If you want to control this programmatically, the popover will not auto-close if the Close button is clicked, ESC key is used, or if a click occurs outside the popover. Instead, the consumer is responsible for closing the popover themselves by adding a callback listener for the shouldClose prop. | |
| shouldClose | func | () => undefined | Callback function that is only invoked when isVisible is also controlled. Called when the popover Close button is clicked or the ESC key is used | |
| appendTo | element | func | () => document.body | The element to append the popover to, defaults to body | |
| hideOnOutsideClick | bool | true | Hides the popover when a click occurs outside (only works if isVisible is not controlled by the user) | |
| onHide | func | () => undefined | Lifecycle function invoked when the popover begins to transition out. | |
| onHidden | func | () => undefined | Lifecycle function invoked when the popover has fully transitioned out. | |
| onShow | func | () => undefined | Lifecycle function invoked when the popover begins to transition in. | |
| onShown | func | () => undefined | Lifecycle function invoked when the popover has fully transitioned in. | |
| onMount | func | () => undefined | Lifecycle function invoked when the popover has been mounted to the DOM. | |
| zIndex | number | 9999 | z-index of the popover | |
| size | enum: 'small', 'regular', 'large' | 'regular' | Size of the popover | |
| closeBtnAriaLabel | string | 'Close' | Aria label for the Close button |