Patternfly Logo

Examples

Basic

Popover react ref

Popover selector ref

Advanced

Popover Position

Headless

Props

Popover properties
NameTypeRequiredDefaultDescription
animationDurationnumberNo300CSS fade transition animation duration
appendToHTMLElement | ((ref?: HTMLElement) => HTMLElement)No() => document.bodyThe element to append the popover to, defaults to body
aria-labelstringNo''Accessible label, required when header is not present
bodyContentReact.ReactNodeYesBody content
Deprecated: boundary'scrollParent' | 'window' | 'viewport' | HTMLElementNo- no longer used. if you want to constrain the popper to a specific element use the appendTo prop instead
childrenReactElement<any>NoThe reference element to which the Popover is relatively placed to. If you cannot wrap the reference with the Popover, you can use the reference prop instead. Usage: <Popover><Button>Reference</Button></Popover>
classNamestringNo''Popover additional class
closeBtnAriaLabelstringNo'Close'Aria label for the Close button
distancenumberNo25Distance of the popover to its target, defaults to 25
enableFlipbooleanNotrueIf 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')[]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.
footerContentReact.ReactNodeNonullFooter content
headerContentReact.ReactNodeNonullHeader content, leave empty for no header
hideOnOutsideClickbooleanNotrueHides the popover when a click occurs outside (only works if isVisible is not controlled by the user)
idstringNoid used as part of the various popover elements (popover-${id}-header/body/footer)
isVisiblebooleanNonullTrue 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.
maxWidthstringNopopoverMaxWidth && popoverMaxWidth.valueMaximum width of the popover (default 18.75rem)
minWidthstringNopopoverMinWidth && popoverMinWidth.valueMinimum width of the popover (default 6.25rem)
onHidden(tip?: TippyInstance) => voidNo(): void => nullLifecycle function invoked when the popover has fully transitioned out. Note: The tip argument is no longer passed and has been deprecated.
onHide(tip?: TippyInstance) => voidNo(): void => nullLifecycle function invoked when the popover begins to transition out. Note: The tip argument is no longer passed and has been deprecated.
onMount(tip?: TippyInstance) => voidNo(): void => nullLifecycle function invoked when the popover has been mounted to the DOM. Note: The tip argument is no longer passed and has been deprecated.
onShow(tip?: TippyInstance) => voidNo(): void => nullLifecycle function invoked when the popover begins to transition in. Note: The tip argument is no longer passed and has been deprecated.
onShown(tip?: TippyInstance) => voidNo(): void => nullLifecycle function invoked when the popover has fully transitioned in. Note: The tip argument is no longer passed and has been deprecated.
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.
referenceHTMLElement | (() => HTMLElement) | React.RefObject<any>NoThe reference element to which the Popover is relatively placed to. If you can wrap the reference with the Popover, you can use the children prop instead. Usage: <Popover reference={() => document.getElementById('reference-element')} />
shouldClose(tip?: TippyInstance, hideFunction?: () => void) => voidNo(): void => nullCallback function that is only invoked when isVisible is also controlled. Called when the popover Close button is clicked, Enter key was used on it, or the ESC key is used. Note: The tip argument is no longer passed and has been deprecated.
shouldOpen(showFunction?: () => void) => voidNo(): void => nullCallback function that is only invoked when isVisible is also controlled. Called when the Enter key is used on the focused trigger
Deprecated: tippyPropsPartial<TippyProps>No- no longer used
zIndexnumberNo9999z-index of the popover

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--TranslateX
-50%
.pf-c-popover--pf-c-popover__arrow--m-top--TranslateY
50%
.pf-c-popover--pf-c-popover__arrow--m-top--Rotate
45deg
.pf-c-popover--pf-c-popover__arrow--m-right--TranslateX
-50%
.pf-c-popover--pf-c-popover__arrow--m-right--TranslateY
-50%
.pf-c-popover--pf-c-popover__arrow--m-right--Rotate
45deg
.pf-c-popover--pf-c-popover__arrow--m-bottom--TranslateX
-50%
.pf-c-popover--pf-c-popover__arrow--m-bottom--TranslateY
-50%
.pf-c-popover--pf-c-popover__arrow--m-bottom--Rotate
45deg
.pf-c-popover--pf-c-popover__arrow--m-left--TranslateX
50%
.pf-c-popover--pf-c-popover__arrow--m-left--TranslateY
-50%
.pf-c-popover--pf-c-popover__arrow--m-left--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

View source on GitHub