Skip to content
Versions 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

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

icon

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

body

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

footer

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

Attributes

None

Methods

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pf-c-popover__arrow--Height

Height of the arrow

1.5625rem
--pf-c-popover__arrow--Width

Width of the arrow

1.5625rem
--pf-c-popover__title-text--Color

Heading font color

inherit
--pf-c-popover__title-icon--Color

Heading icon font color

#151515
--pf-c-popover__arrow--BackgroundColor

Arrow background color

#fff
--pf-c-popover__arrow--BoxShadow

Arrow box shadow

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

Popover box shadow

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

Popover top padding

1rem
--pf-c-tooltip__content--PaddingRight

Popover right padding

1rem
--pf-c-tooltip__content--PaddingBottom

Popover bottom padding

1rem
--pf-c-tooltip__content--PaddingLeft

Popover left padding

1rem
--pf-c-popover--line-height

Popover line height

1.5
--pf-c-popover__content--FontSize

Popover font-size

0.875rem
--pf-c-popover__content--BackgroundColor

Popover background color

#fff
--pf-c-popover--MaxWidth

Popover max-width

20.75rem
--pf-c-popover--MinWidth

Popover min-width

20.75rem
--pf-c-popover--c-button--Right

Close button right position

0
--pf-c-popover--c-button--Top

Close button top position

0
--pf-c-popover--c-button--sibling--PaddingRight

Padding between close button and its immediate sibling

3rem
--pf-c-popover__title-icon--MarginRight

Heading icon right margin

0.5rem
--pf-c-popover__title--FontSize

Header font-size

1rem
--pf-c-popover__title--MarginBottom

Header bottom margin

0.5rem
--pf-c-popover__title--LineHeight

Header line height

1.5
--pf-c-popover__title--FontFamily

Header font-family

'RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif
--pf-c-popover__footer--MarginTop

Footer top margin

1rem
--pf-c-popover--m-default__title-text--Color

Default alert heading color

#003737
--pf-c-popover--m-default__title-icon--Color

Default alert icon color

#009596
--pf-c-popover--m-info__title-text--Color

Default alert heading color

#002952
--pf-c-popover--m-info__title-icon--Color

Default alert icon color

#2b9af3
--pf-c-popover--m-warning__title-text--Color

Default alert heading color

#795600
--pf-c-popover--m-warning__title-icon--Color

Default alert icon color

#f0ab00
--pf-c-popover--m-success__title-text--Color

Default alert heading color

#1e4f18
--pf-c-popover--m-success__title-icon--Color

Default alert icon color

#3e8635
--pf-c-popover--m-danger__title-text--Color

Default alert heading color

#a30000
--pf-c-popover--m-danger__title-icon--Color

Default alert icon color

#c9190b

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-2024 Red Hat, Inc. Deploys by Netlify