Popover
A Popover displays content in a non-modal dialog and adds contextual information or provides resources via text and links.
Overview
Installation
npm install @patternfly/elementsUsage
View HTML Source
<pf-popover heading="Popover heading"
body="Popovers are triggered by click rather than hover."
footer="Popover footer">
<button>Toggle popover</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.
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
