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

heading

This slot projects content into the header of the popover. Typically this would be a heading (e.g. h2, h3, etc.) element.

Default Slot

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

icon
body
footer

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__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

Arrow background color

 var(--pf-global--BackgroundColor--100, #fff)
--pf-c-popover__arrow--BoxShadow

Arrow box shadow

 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

Height of the arrow

 var(--pf-global--arrow--width-lg, 1.5625rem)
--pf-c-popover__arrow--Width

Width of the arrow

 var(--pf-global--arrow--width-lg, 1.5625rem)
--pf-global--arrow--width-lg 1.5625rem
--pf-c-popover--BoxShadow

Popover box shadow

 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

Popover line height

 1.5
--pf-c-popover__content--FontSize

Popover font-size

 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

Popover background color

 var(--pf-global--BackgroundColor--100, #fff)
--pf-global--BackgroundColor--100 #fff
--pf-c-popover--MaxWidth

Popover max-width

 calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)
--pf-c-popover--MinWidth

Popover min-width

 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

Close button right position

 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

Close button top position

 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

Padding between close button and its immediate sibling

 var(--pf-global--spacer--2xl, 3rem)
--pf-global--spacer--2xl 3rem
--pf-c-popover__title-icon--MarginRight

Heading icon right margin

 var(--pf-global--spacer--sm, 0.5rem)
--pf-global--FontWeight--normal 400
--pf-c-popover__title--FontSize

Header font-size

 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

Header bottom margin

 var(--pf-global--spacer--sm, 0.5rem)
--pf-global--spacer--sm 0.5rem
--pf-c-popover__title--LineHeight

Header line height

 var(--pf-global--LineHeight--md, 1.5)
--pf-global--LineHeight--md 1.5
--pf-c-popover__title--FontFamily

Header font-family

 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

Footer top margin

 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

heading
container

The component wrapper

content

The content wrapper

close-button

The close button

header

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

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