Skip to content
Patternfly Logo

Popover

A popover is in-app messaging that provides more information on specific product areas. Popovers display content in a new window that overlays the current page. Unlike modals, popovers don't block the current page.

Examples

Basic

Close popover from content (controlled)

Close popover from content (uncontrolled)

Note: If you use the isVisible prop, either refer to the example above or if you want to use the hide callback from the content then be sure to keep isVisible in-sync.

Without header/footer/close and no padding

Width auto

Popover react ref

Popover selector ref

Advanced

Popover position

Popover with icon in the title

Alert popover

Alert variant:

Props

Popover

The main popover component. The following properties can also be passed into another component that has a property specifically for passing in popover properties.
*required
NameTypeDefaultDescription
bodyContentrequiredReact.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>}
alertSeverityScreenReaderTextstringText announced by screen reader when alert severity variant is set to indicate severity level.
alertSeverityVariant'default' | 'info' | 'warning' | 'success' | 'danger'Severity variants for an alert popover. This modifies the color of the header to match the severity.
animationDurationnumber300The duration of the CSS fade transition animation.
appendToHTMLElement | ((ref?: HTMLElement) => HTMLElement)() => document.bodyThe element to append the popover to. Defaults to "document.body".
aria-labelstring''Accessible label for the popover, required when header is not present.
Deprecated: boundary'scrollParent' | 'window' | 'viewport' | HTMLElement- no longer used. if you want to constrain the popper to a specific element use the appendTo prop instead.
childrenReactElement<any>The 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>
classNamestring''Additional classes added to the popover.
closeBtnAriaLabelstring'Close'Accessible label for the close button.
distancenumber25Distance of the popover to its target. Defaults to 25.
enableFlipbooleantrueIf 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.
footerContentReact.ReactNode | ((hide: () => void) => React.ReactNode)nullFooter 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>}
hasAutoWidthbooleanfalseRemoves fixed-width and allows width to be defined by contents.
hasNoPaddingbooleanfalseAllows 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.
headerContentReact.ReactNode | ((hide: () => void) => React.ReactNode)nullSimple 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>}
headerIconReact.ReactNodenullIcon to be displayed in the popover header. *
hideOnOutsideClickbooleantrueHides the popover when a click occurs outside (only works if isVisible is not controlled by the user).
idstringId used as part of the various popover elements (popover-${id}-header/body/footer).
isVisiblebooleannullTrue 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.
maxWidthstringpopoverMaxWidth && popoverMaxWidth.valueMaximum width of the popover (default 18.75rem).
minWidthstringpopoverMinWidth && popoverMinWidth.valueMinimum width of the popover (default 6.25rem).
onHidden(tip?: TippyInstance) => void(): 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) => void(): 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) => void(): 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) => void(): 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) => void(): void => nullLifecycle function invoked when the popover has fully transitioned in. Note: The tip argument is no longer passed and has been deprecated.
positionPopoverPosition | '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.
referenceHTMLElement | (() => HTMLElement) | React.RefObject<any>The 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')} />
removeFindDomNodeBetabooleanfalseOpt-in for updated popper that does not use findDOMNode.
shouldClose(tip?: TippyInstance, hideFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void(): void => nullCallback 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. Note: The tip argument is no longer passed and has been deprecated.
shouldOpen(showFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void(): void => nullCallback function that is only invoked when isVisible is also controlled. Called when the enter key is used on the focused trigger.
showClosebooleantrueFlag indicating whether the close button should be shown.
Deprecated: tippyPropsPartial<TippyProps>- no longer used.
withFocusTrapbooleanWhether to trap focus in the popover.
zIndexnumber9999The z-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.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-popover--pf-c-popover--m-danger__title-icon--Color
#c9190b
.pf-c-popover--pf-c-popover--m-warning__title-icon--Color
#f0ab00
.pf-c-popover--pf-c-popover--m-success__title-icon--Color
#3e8635
.pf-c-popover--pf-c-popover--m-info__title-icon--Color
#2b9af3
.pf-c-popover--pf-c-popover--m-default__title-icon--Color
#009596
.pf-c-popover--pf-c-popover--m-danger__title-text--Color
#a30000
.pf-c-popover--pf-c-popover--m-warning__title-text--Color
#795600
.pf-c-popover--pf-c-popover--m-success__title-text--Color
#1e4f18
.pf-c-popover--pf-c-popover--m-info__title-text--Color
#002952
.pf-c-popover--pf-c-popover--m-default__title-text--Color
#003737
.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.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.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
calc(1rem - 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__title--MarginBottom
0.5rem
.pf-c-popover--pf-c-popover__title--LineHeight
1.5
.pf-c-popover--pf-c-popover__title--FontFamily
'"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif'
.pf-c-popover--pf-c-popover__title--FontSize
1rem
.pf-c-popover--pf-c-popover__title-icon--MarginRight
0.5rem
.pf-c-popover--pf-c-popover__title-icon--Color
#151515
.pf-c-popover--pf-c-popover__footer--MarginTop
1rem
.pf-c-popover.pf-m-no-padding--pf-c-popover__content--PaddingTop
0px
.pf-c-popover.pf-m-no-padding--pf-c-popover__content--PaddingRight
0px
.pf-c-popover.pf-m-no-padding--pf-c-popover__content--PaddingBottom
0px
.pf-c-popover.pf-m-no-padding--pf-c-popover__content--PaddingLeft
0px
.pf-c-popover.pf-m-width-auto--pf-c-popover--MinWidth
auto
.pf-c-popover.pf-m-width-auto--pf-c-popover--MaxWidth
none
.pf-c-popover.pf-m-danger--pf-c-popover__title-icon--Color
#c9190b
.pf-c-popover.pf-m-danger--pf-c-popover__title-text--Color
#a30000
.pf-c-popover.pf-m-warning--pf-c-popover__title-icon--Color
#f0ab00
.pf-c-popover.pf-m-warning--pf-c-popover__title-text--Color
#795600
.pf-c-popover.pf-m-success--pf-c-popover__title-icon--Color
#3e8635
.pf-c-popover.pf-m-success--pf-c-popover__title-text--Color
#1e4f18
.pf-c-popover.pf-m-default--pf-c-popover__title-icon--Color
#009596
.pf-c-popover.pf-m-default--pf-c-popover__title-text--Color
#003737
.pf-c-popover.pf-m-info--pf-c-popover__title-icon--Color
#2b9af3
.pf-c-popover.pf-m-info--pf-c-popover__title-text--Color
#002952

View source on GitHub