| bodyContent*required | React.ReactNode | ((hide: () => void) => React.ReactNode) | | Body content of the popover. If you want to close the popover after an action within the
body content, you can use the isVisible prop for manual control, or you can provide a
function which will receive a callback as an argument to hide the popover, i.e.
bodyContent={hide => <Button onClick={() => hide()}>Close</Button>} |
| alertSeverityScreenReaderText | string | | Text announced by screen reader when alert severity variant is set to indicate
severity level. |
| alertSeverityVariant | 'custom' | 'info' | 'warning' | 'success' | 'danger' | | Severity variants for an alert popover. This modifies the color of the header to
match the severity. |
| animationDuration | number | 300 | The duration of the CSS fade transition animation. |
| appendTo | HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline' | () => document.body | The element to append the popover to. Defaults to "inline". |
| aria-label | string | '' | Accessible label for the popover, required when header is not present. |
| children | ReactElement<any> | | The trigger reference element to which the popover is relatively placed to. If you cannot wrap
the element with the Popover, you can use the triggerRef prop instead.
Usage: <Popover><Button>Reference</Button></Popover> |
| className | string | '' | Additional classes added to the popover. |
| closeBtnAriaLabel | string | 'Close' | Accessible label for the close button. |
| distance | number | 25 | Distance of the popover to its target. Defaults to 25. |
| elementToFocus | HTMLElement | SVGElement | string | | The element to focus when the popover becomes visible. By default the first
focusable element will receive focus. |
| enableFlip | boolean | true | If true, tries to keep the popover in view by flipping it if necessary.
If the position is set to 'auto', this prop is ignored. |
| flipBehavior | | 'flip'
| (
| 'top'
| 'bottom'
| 'left'
| 'right'
| 'top-start'
| 'top-end'
| 'bottom-start'
| 'bottom-end'
| 'left-start'
| 'left-end'
| 'right-start'
| 'right-end'
)[] | [
'top',
'bottom',
'left',
'right',
'top-start',
'top-end',
'bottom-start',
'bottom-end',
'left-start',
'left-end',
'right-start',
'right-end'
] | The desired position to flip the popover to if the initial position is not possible.
By setting this prop to 'flip' it attempts to flip the popover to the opposite side if
there is no space.
You can also pass an array of positions that determines the flip order. It should contain
the initial position followed by alternative positions if that position is unavailable.
Example: Initial position is 'top'. Button with popover is in the top right corner.
'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it
checks if right is available. There's also no space to the right, so it finally shows the
popover on the left. |
| footerContent | React.ReactNode | ((hide: () => void) => React.ReactNode) | null | Footer content of the popover. If you want to close the popover after an action within the
footer content, you can use the isVisible prop for manual control, or you can provide a
function which will receive a callback as an argument to hide the popover, i.e.
footerContent={hide => <Button onClick={() => hide()}>Close</Button>} |
| hasAutoWidth | boolean | false | Removes fixed-width and allows width to be defined by contents. |
| hasNoPadding | boolean | false | Allows content to touch edges of popover container. |
| headerComponent | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h6' | Sets the heading level to use for the popover header. Defaults to h6. |
| headerContent | React.ReactNode | ((hide: () => void) => React.ReactNode) | null | Simple header content to be placed within a title. If you want to close the popover after
an action within the header content, you can use the isVisible prop for manual control,
or you can provide a function which will receive a callback as an argument to hide the
popover, i.e. headerContent={hide => <Button onClick={() => hide()}>Close</Button>} |
| headerIcon | React.ReactNode | null | Icon to be displayed in the popover header. * |
| hideOnOutsideClick | boolean | true | Hides the popover when a click occurs outside (only works if isVisible is not controlled
by the user). |
| id | string | | Id used as part of the various popover elements (popover-${id}-header/body/footer). |
| isVisible | boolean | 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, the escape 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. |
| maxWidth | string | popoverMaxWidth && popoverMaxWidth.value | Maximum width of the popover (default 18.75rem). |
| minWidth | string | popoverMinWidth && popoverMinWidth.value | Minimum width of the popover (default 6.25rem). |
| onHidden | () => void | (): void => null | Lifecycle function invoked when the popover has fully transitioned out. |
| onHide | (event: MouseEvent | KeyboardEvent) => void | (): void => null | Lifecycle function invoked when the popover begins to transition out. |
| onMount | () => void | (): void => null | Lifecycle function invoked when the popover has been mounted to the DOM. |
| onShow | (event: MouseEvent | KeyboardEvent) => void | (): void => null | Lifecycle function invoked when the popover begins to transition in. |
| onShown | () => void | (): void => null | Lifecycle function invoked when the popover has fully transitioned in. |
| position | | PopoverPosition
| 'auto'
| 'top'
| 'bottom'
| 'left'
| 'right'
| 'top-start'
| 'top-end'
| 'bottom-start'
| 'bottom-end'
| 'left-start'
| 'left-end'
| 'right-start'
| 'right-end' | 'top' | Popover position. Note: With the enableFlip property set to true, it will change the
position if there is not enough space for the starting position. The behavior of where it
flips to can be controlled through the flipBehavior property. |
| shouldClose | (event: MouseEvent | KeyboardEvent, hideFunction?: () => void) => void | (): void => null | Callback function that is only invoked when isVisible is also controlled. Called when the
popover close button is clicked, the enter key was used on it, or the escape key is used. |
| shouldOpen | (event: MouseEvent | KeyboardEvent, showFunction?: () => void) => void | (): void => null | Callback function that is only invoked when isVisible is also controlled. Called when the
enter key is used on the focused trigger. |
| showClose | boolean | true | Flag indicating whether the close button should be shown. |
| triggerAction | 'click' | 'hover' | 'click' | Sets an interaction to open popover, defaults to "click" |
| triggerRef | HTMLElement | (() => HTMLElement) | React.RefObject<any> | | The trigger reference element to which the popover is relatively placed to. If you can wrap the
element with the popover, you can use the children prop instead, or both props together.
When passed along with the trigger prop, the div element that wraps the trigger will be removed.
Usage: <Popover triggerRef={() => document.getElementById('reference-element')} /> |
| withFocusTrap | boolean | | Whether to trap focus in the popover. |
| zIndex | number | 9999 | The z-index of the popover. |
