Skip to content
PatternFly.org Contribute on Github
PatternFly Elements
Versions v4 v3 v2 v1

Popover

A Popover displays content in a non-modal dialog and adds contextual information or provides resources via text and links.

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-popover/pf-popover.js';

Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.

Overview

Toggle popover

Installation

npm install @patternfly/elements

Usage

Toggle popover
View HTML Source 
<pf-popover heading="Popover heading"
      body="Popovers are triggered by click rather than hover."
      footer="Popover footer">
  <pf-button>Toggle popover</pf-button>
</pf-popover>

Note: Unlike the Patternfly React implementation, this component does not trap focus in the popover dialog. If you would like to trap focus, consider using a modal dialog instead.

Activating programmatically

Use the show() method to activate the popover.

HTML 
<script type="module">
  import '@patternfly/elements/pf-button/pf-button.js';
  import '@patternfly/elements/pf-popover/pf-popover.js';

const button = document.querySelector('pf-button');


const popover = document.querySelector('pf-popover');


button.addEventListener('mouseover', function() {
popover.show();
});


button.addEventListener('mouseout', function() {
popover.hide();
});
</script>


<pf-button>Hover to cite</pf-button>


<pf-popover>
<cite slot="body">Richard M. Stallman</cite>
<q>Free software is a political movement; open source is a development model.</q>
</pf-popover>
 Lit 
import { LitElement, html } from 'lit';
import '@patternfly/elements/pf-button/pf-button.js';
import '@patternfly/elements/pf-popover/pf-popover.js';

class Citer extends LitElement {
  render() {
    return html`
<pf-button @mouseover="${this.#onMouseover}"
           @mouseout="${this.#onMouseout}">Hover to Cite</pf-button>

<pf-popover>
  <cite slot="body">Richard M. Stallman</cite>
  <q>Free software is a political movement; open source is a development model.</q>
</pf-popover>
    `;
  }

  get #popover() { return this.shadowRoot.querySelector('pf-popover'); }

  #onMouseover() { this.#popover.show(); }

  #onMouseout() { this.#popover.hide(); }
}
 React 
import { Button } from '@patternfly/elements/react/pf-button/pf-button.js';
import { Popover } from '@patternfly/elements/react/pf-popover/pf-popover.js';
import { useRef } from 'react';

export function Citer() {
const popoverRef = useRef(null);


const onMouseover = e => void popoverRef.current.show();


const onMouseout = e => void popoverRef.current.hide();


return (
<>
<Button onmouseover={onMouseover}
onmouseout={onMouseout}>Hover to Cite</Button>
<Popover ref={popoverRef}>
<cite slot="body">Richard M. Stallman</cite>
<q>Free software is a political movement; open source is a development model.</q>
</Popover>
</>
);
}

Slots

Default Slot

The default slot holds invoking element. Typically this would be an icon, button, or other small sized element.

heading

heading This slot renders the content that will be displayed inside of the header of the popover. Typically this would be a heading element.

icon

icon This slot renders the icon that will be displayed inside the header of the popover, before the heading.

body

body This slot renders the content that will be displayed inside of the body of the popover.

footer

footer This slot renders the content that will be displayed inside of the footer of the popover.

Attributes

position

Indicates the initial popover position. There are 12 options: top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end,right-start, right-end. The default is top.

DOM Property
position
Type
Placement
Default
'top'
heading

The content rendered in the popover's heading.

DOM Property
heading
Type
string
Default
unknown
body

The content rendered in the popover's body.

DOM Property
body
Type
string
Default
unknown
footer

The content rendered in the popover's footer.

DOM Property
footer
Type
string
Default
unknown
icon

The icon placed before the popover's heading.

DOM Property
icon
Type
string
Default
unknown
label

The accessible label for the popover. This is required if the no heading is set.

DOM Property
label
Type
string
Default
unknown
distance

The distance to set between the popover and its trigger element.

DOM Property
distance
Type
number
Default
unknown
flip-behavior

The flip order when flip is enabled and the initial position is not possible. There are 12 options: top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end,right-start, right-end. The default is [oppositePlacement], where only the opposite placement is tried.

DOM Property
flipBehavior
Type
Placement[]
Default
unknown
no-flip

Disable the flip behavior. The default is false.

DOM Property
noFlip
Type
boolean
Default
false
heading-level

The heading level to use for the popover's header. The default is h6.

DOM Property
headingLevel
Type
HeadingLevel
Default
unknown
icon-set

Indicates which icon set to use for the header's icon. The default is fas (Font Awesome Free Solid).

DOM Property
iconSet
Type
string
Default
unknown
hide-close

Hide the close button. The default is false.

DOM Property
hideClose
Type
boolean
Default
unknown
alert-severity

Indicates the severity variant to use for the alert popover. There are five options: default, info, warning, success, and danger.

DOM Property
alertSeverity
Type
AlertSeverity
Default
unknown
accessible-close-label

The accessible label for the popover's close button. The default is Close popover.

DOM Property
accessibleCloseLabel
Type
string
Default
unknown
alert-severity-text

The text announced by the screen reader to indicate the popover's severity. The default is ${alertSeverity} alert:.

DOM Property
alertSeverityText
Type
string
Default
unknown
no-outside-click

Don't hide the popover when clicking ouside of it.

DOM Property
noOutsideClick
Type
boolean
Default
unknown
trigger

The ID of the element to attach the popover to.

DOM Property
trigger
Type
string
Default
unknown

Methods

toggle()

Toggle the popover

show()

Opens the popover

hide()

Closes the popover

Events

None

CSS Custom Properties

CSS Property Description Default
--pf-c-popover__arrow--Height 1.5625rem
--pf-c-popover__arrow--Width 1.5625rem
--pf-c-popover__title-text--Color inherit
--pf-c-popover__title-icon--Color #151515
--pf-c-popover__arrow--BackgroundColor #fff
--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--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-tooltip__content--PaddingTop 1rem
--pf-c-tooltip__content--PaddingRight 1rem
--pf-c-tooltip__content--PaddingBottom 1rem
--pf-c-tooltip__content--PaddingLeft 1rem
--pf-c-popover--line-height 1.5
--pf-c-popover__content--FontSize 0.875rem
--pf-c-popover__content--BackgroundColor #fff
--pf-c-popover--MaxWidth 20.75rem
--pf-c-popover--MinWidth 20.75rem
--pf-c-popover--c-button--Right `0
--pf-c-popover--c-button--Top 0
--pf-c-popover--c-button--sibling--PaddingRight 3rem
--pf-c-popover__title-icon--MarginRight 0.5rem
--pf-c-popover__title--FontSize 1rem
--pf-c-popover__title--MarginBottom 0.5rem
--pf-c-popover__title--LineHeight 1.5
--pf-c-popover__title--FontFamily 'RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif
--pf-c-popover__footer--MarginTop 1rem
--pf-c-popover--m-default__title-text--Color #003737
--pf-c-popover--m-default__title-icon--Color #009596
--pf-c-popover--m-info__title-text--Color #002952
--pf-c-popover--m-info__title-icon--Color #2b9af3
--pf-c-popover--m-warning__title-text--Color #795600
--pf-c-popover--m-warning__title-icon--Color #f0ab00
--pf-c-popover--m-success__title-text--Color #1e4f18
--pf-c-popover--m-success__title-icon--Color #3e8635
--pf-c-popover--m-danger__title-text--Color #a30000
--pf-c-popover--m-danger__title-icon--Color #c9190b
--pf-c-popover__title-text--Color inherit
--pf-c-popover__title-icon--Color var(--pf-global--Color--100, #151515)
--pf-popover--animation-speed 300ms
--pf-popover--z-index 9999
--pf-c-popover__arrow--BackgroundColor var(--pf-global--BackgroundColor--100, #fff)
--pf-c-popover__arrow--BoxShadow var(--pf-global--BoxShadow--lg, 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__arrow--Height var(--pf-global--arrow--width-lg, 1.5625rem)
--pf-c-popover__arrow--Width var(--pf-global--arrow--width-lg, 1.5625rem)
--pf-global--arrow--width-lg 1.5625rem
--pf-c-popover--BoxShadow var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08))
--pf-global--BoxShadow--lg 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__content--PaddingBottom var(--pf-global--spacer--md, 1rem)
--pf-c-popover--line-height 1.5
--pf-c-popover__content--FontSize var(--pf-global--FontSize--sm, 0.875rem)
--pf-global--FontSize--sm 0.875rem
--pf-c-popover__content--Color var(--pf-global--Color--100, #151515)
--pf-global--Color--100 #151515
--pf-c-popover__content--BackgroundColor var(--pf-global--BackgroundColor--100, #fff)
--pf-global--BackgroundColor--100 #fff
--pf-c-popover--MaxWidth calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)
--pf-c-popover--MinWidth calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)
--pf-c-popover__content--PaddingLeft 1rem
--pf-c-popover--c-button--Right calc(var(--pf-c-popover__content--PaddingRight, 1rem) - var(--pf-global--spacer--md, 1rem))
--pf-c-popover__content--PaddingRight 1rem
--pf-c-popover--c-button--Top calc(var(--pf-c-popover__content--PaddingTop, 1rem) - var(--pf-global--spacer--form-element, 0.375rem))
--pf-c-popover__content--PaddingTop 1rem
--pf-global--spacer--form-element 0.375rem
--pf-c-popover--c-button--sibling--PaddingRight var(--pf-global--spacer--2xl, 3rem)
--pf-global--spacer--2xl 3rem
--pf-c-popover__title-icon--MarginRight var(--pf-global--spacer--sm, 0.5rem)
--pf-global--FontWeight--normal 400
--pf-c-popover__title--FontSize var(--pf-global--FontSize--md, var(--pf-global--icon--FontSize--md, 1em))
--pf-global--FontSize--md var(--pf-global--icon--FontSize--md, 1em)
--pf-global--icon--FontSize--md 1em
--pf-c-popover__title--MarginBottom var(--pf-global--spacer--sm, 0.5rem)
--pf-global--spacer--sm 0.5rem
--pf-c-popover__title--LineHeight var(--pf-global--LineHeight--md, 1.5)
--pf-global--LineHeight--md 1.5
--pf-c-popover__title--FontFamily var( --pf-global--FontFamily--heading--sans-serif, 'RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif )
--pf-global--FontFamily--heading--sans-serif 'RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif
--pf-c-popover__footer--MarginTop var(--pf-global--spacer--md, 1rem)
--pf-global--spacer--md 1rem
--pf-c-popover--m-default__title-text--Color var(--pf-global--default-color--300, #003737)
--pf-global--default-color--300 #003737
--pf-c-popover--m-default__title-icon--Color var(--pf-global--default-color--200, #009596)
--pf-global--default-color--200 #009596
--pf-c-popover--m-info__title-text--Color var(--pf-global--info-color--200, #002952)
--pf-global--info-color--200 #002952
--pf-c-popover--m-info__title-icon--Color var(--pf-global--info-color--100, #2b9af3)
--pf-global--info-color--100 #2b9af3
--pf-c-popover--m-warning__title-icon--Color var(--pf-global--warning-color--100, #f0ab00)
--pf-global--warning-color--100 #f0ab00
--pf-c-popover--m-warning__title-text--Color var(--pf-global--warning-color--200, #795600)
--pf-global--warning-color--200 #795600
--pf-c-popover--m-success__title-icon--Color var(--pf-global--success-color--100, #3e8635)
--pf-global--success-color--100 #3e8635
--pf-c-popover--m-success__title-text--Color var(--pf-global--success-color--200, #1e4f18)
--pf-global--success-color--200 #1e4f18
--pf-c-popover--m-danger__title-icon--Color var(--pf-global--danger-color--100, #c9190b)
--pf-global--danger-color--100 #c9190b
--pf-c-popover--m-danger__title-text--Color var(--pf-global--danger-color--200, #a30000)
--pf-global--danger-color--200 #a30000

CSS Shadow Parts

container

The component wrapper

content

The content wrapper

header

The header element; only visible if both an icon annd heading are provided.

heading

The heading element

icon

The header icon

close-button

The close button

body

The container for the body content

footer

The container for the footer content

© 2018-2025 Red Hat, Inc. Deploys by Netlify