Popover
Use a popover to display content in a new window that overlays the current page. Unlike a modal, a popover does not block the current page. By default clicking anywhere outside of the popover will dismiss it.
ExamplesPropsCSS VariablesProps
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| aria-label | string | No | '' | Accessible label, required when header is not present |
| appendTo | Element | ((ref: Element) => Element) | No | () => document.body | The element to append the popover to, defaults to body |
| bodyContent | React.ReactNode | Yes | Body content | |
| boundary | 'scrollParent' | 'window' | 'viewport' | HTMLElement | No | 'window' | If enableFlip is true, the popover responds to this boundary |
| children | ReactElement<any> | Yes | The reference element to which the popover is relatively placed to | |
| className | string | No | '' | Popover additional class |
| closeBtnAriaLabel | string | No | 'Close' | Aria label for the Close button |
| distance | number | No | 25 | Distance of the popover to its target, defaults to 25 |
| enableFlip | boolean | No | true | If true, tries to keep the popover in view by flipping it if necessary |
| flipBehavior | 'flip' | ('top' | 'bottom' | 'left' | 'right')[] | No | ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'] | 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 | No | null | Footer content |
| headerContent | React.ReactNode | No | null | Header content, leave empty for no header |
| hideOnOutsideClick | boolean | No | true | Hides the popover when a click occurs outside (only works if isVisible is not controlled by the user) |
| isVisible | boolean | No | 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. |
| minWidth | string | No | Minimum width of the popover (default 6.25rem) | |
| maxWidth | string | No | popoverMaxWidth && popoverMaxWidth.value | Maximum width of the popover (default 18.75rem) |
| onHidden | (tip: TippyInstance) => void | No | (): void => null | Lifecycle function invoked when the popover has fully transitioned out. |
| onHide | (tip: TippyInstance) => void | No | (): void => null | Lifecycle function invoked when the popover begins to transition out. |
| onMount | (tip: TippyInstance) => void | No | (): void => null | Lifecycle function invoked when the popover has been mounted to the DOM. |
| onShow | (tip: TippyInstance) => void | No | (): void => null | Lifecycle function invoked when the popover begins to transition in. |
| onShown | (tip: TippyInstance) => void | No | (): void => null | Lifecycle function invoked when the popover has fully transitioned in. |
| position | 'auto' | 'top' | 'bottom' | 'left' | 'right' | No | 'top' | Popover position. Note: With 'enableFlip' 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 prop. |
| shouldClose | (tip: TippyInstance) => void | No | (): void => null | 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 |
| zIndex | number | No | 9999 | z-index of the popover |
| tippyProps | Partial<TippyProps> | No | {} | additional Props to pass through to tippy.js |
CSS Variables
| .pf-c-popover | --pf-c-popover--FontSize | 0.875rem | ||
| .pf-c-popover | --pf-c-popover--MinWidth | calc(1rem + 1rem + 18.75rem) | ||
| .pf-c-popover | --pf-c-popover--MaxWidth | calc(1rem + 1rem + 18.75rem) | ||
| .pf-c-popover | --pf-c-popover--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||
| .pf-c-popover | --pf-c-popover__content--BackgroundColor | #fff | ||
| .pf-c-popover | --pf-c-popover__content--PaddingTop | 1rem | ||
| .pf-c-popover | --pf-c-popover__content--PaddingRight | 1rem | ||
| .pf-c-popover | --pf-c-popover__content--PaddingBottom | 1rem | ||
| .pf-c-popover | --pf-c-popover__content--PaddingLeft | 1rem | ||
| .pf-c-popover | --pf-c-popover__arrow--Width | 1.5625rem | ||
| .pf-c-popover | --pf-c-popover__arrow--Height | 1.5625rem | ||
| .pf-c-popover | --pf-c-popover__arrow--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||
| .pf-c-popover | --pf-c-popover__arrow--BackgroundColor | #fff | ||
| .pf-c-popover | --pf-c-popover__arrow--m-top--Transform | translate(-50%, 50%) rotate(45deg) | ||
| .pf-c-popover | --pf-c-popover__arrow--m-right--Transform | translate(-50%, -50%) rotate(45deg) | ||
| .pf-c-popover | --pf-c-popover__arrow--m-bottom--Transform | translate(-50%, -50%) rotate(45deg) | ||
| .pf-c-popover | --pf-c-popover__arrow--m-left--Transform | translate(50%, -50%) rotate(45deg) | ||
| .pf-c-popover | --pf-c-popover--c-button--MarginLeft | 0.5rem | ||
| .pf-c-popover | --pf-c-popover--c-button--Top | calc(1rem - 0.375rem) | ||
| .pf-c-popover | --pf-c-popover--c-button--Right | 1rem | ||
| .pf-c-popover | --pf-c-popover--c-button--sibling--PaddingRight | 3rem | ||
| .pf-c-popover | --pf-c-popover--c-title--MarginBottom | 0.5rem | ||
| .pf-c-popover | --pf-c-popover__footer--MarginTop | 1rem | ||
