React

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 Variables

Examples

Simple popover

Copied to clipboard

Advanced popover

Popover Position
Copied to clipboard

Popover (headless)

Copied to clipboard

Props

Popover Props

The Popover component accepts the following props.

NameTypeRequiredDefaultDescription
positionenum'top'Popover position
enableFlipbooltrueIf true, tries to keep the popover in view by flipping it if necessary
classNamestringnullPopover additional class
childrenelementThe reference element to which the popover is relatively placed to
aria-labelcustom''Accessible label, required when header is not present
headerContentnodenullHeader content, leave empty for no header
bodyContentnodeBody content
footerContentnodenull
isVisibleboolnullTrue 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.
shouldClosefunc() => undefinedCallback function that is only invoked when isVisible is also controlled. Called when the popover Close button is clicked or the ESC key is used
appendTounion() => document.bodyThe element to append the popover to, defaults to body
hideOnOutsideClickbooltrueHides the popover when a click occurs outside (only works if isVisible is not controlled by the user)
onHidefunc() => undefinedLifecycle function invoked when the popover begins to transition out.
onHiddenfunc() => undefinedLifecycle function invoked when the popover has fully transitioned out.
onShowfunc() => undefinedLifecycle function invoked when the popover begins to transition in.
onShownfunc() => undefinedLifecycle function invoked when the popover has fully transitioned in.
onMountfunc() => undefinedLifecycle function invoked when the popover has been mounted to the DOM.
zIndexnumber9999z-index of the popover
maxWidthstringpopoverMaxWidth && popoverMaxWidth.valueMaximum width of the tooltip (default 18.75rem)
closeBtnAriaLabelstring'Close'Aria label for the Close button

CSS Variables

--pf-c-popover--BoxShadowc_popover_BoxShadow0 0.0625rem 0.0625rem 0rem rgba(3,3,3,.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,.06)
--pf-c-popover--MaxWidthc_popover_MaxWidthcalc(1.5rem + 18.75rem)
--pf-c-popover--MinWidthc_popover_MinWidthcalc(1.5rem + 6.25rem)
--pf-c-popover__arrow--BackgroundColorc_popover__arrow_BackgroundColor#fff
--pf-c-popover__arrow--BoxShadowc_popover__arrow_BoxShadow0 0.0625rem 0.0625rem 0rem rgba(3,3,3,.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,.06)
--pf-c-popover__arrow--Heightc_popover__arrow_Height1.5625rem
--pf-c-popover__arrow--Widthc_popover__arrow_Width1.5625rem
--pf-c-popover__arrow--m-bottom--Transformc_popover__arrow_m_bottom_Transformtranslate(-50%,-50%) rotate(45deg)
--pf-c-popover__arrow--m-left--Transformc_popover__arrow_m_left_Transformtranslate(50%,-50%) rotate(45deg)
--pf-c-popover__arrow--m-right--Transformc_popover__arrow_m_right_Transformtranslate(-50%,-50%) rotate(45deg)
--pf-c-popover__arrow--m-top--Transformc_popover__arrow_m_top_Transformtranslate(-50%,50%) rotate(45deg)
--pf-c-popover__content--BackgroundColorc_popover__content_BackgroundColor#fff
--pf-c-popover__content--PaddingBottomc_popover__content_PaddingBottom2rem
--pf-c-popover__content--PaddingLeftc_popover__content_PaddingLeft2rem
--pf-c-popover__content--PaddingRightc_popover__content_PaddingRight2rem
--pf-c-popover__content--PaddingTopc_popover__content_PaddingTop2rem
--pf-c-popover__footer--MarginTopc_popover__footer_MarginTop1.5rem
--pf-c-popover--c-button--MarginLeftc_popover_c_button_MarginLeft0.5rem
--pf-c-popover--c-button--Rightc_popover_c_button_Right1rem
--pf-c-popover--c-button--Topc_popover_c_button_Topcalc(2rem - 0.375rem + 0.0625rem)
--pf-c-popover--c-button--sibling--PaddingRightc_popover_c_button_sibling_PaddingRight1.5rem
--pf-c-popover--c-title--MarginBottomc_popover_c_title_MarginBottom1.5rem