A Popover displays content in a non-modal dialog and adds contextual information or provides resources via text and links.
A popover should include text and interactive elements like a close button and links.
Black and white are the two popover variants available for use depending on the content and color of the background.
For popovers and tooltips, the themes are inverted. For example, light theme popovers are black and should be used on light backgrounds; dark theme popovers are white and should be used on dark backgrounds.
Black (light backgrounds)
White (dark backgrounds)
Use a popover to answer a question, explain something, or provide a user with guidance to help them complete a task.
Popover vs. tooltip
Both popovers and tooltips provide more information in context for a user. However, they are different in a few ways:
- Popovers are used for added description or information in context whereas tooltips are used for identification purposes.
- Popovers contain longer descriptions and optional links whereas tooltips only contain short descriptions or labels.
- On large screens, popovers appear on click whereas tooltips appear on hover.
A popover heading and body text can have more characters if the overall message creates a more helpful user experience.
|Two links||15 (each)|
A popover has four orientations depending on where it needs to be located, top, right, bottom, or left. If a popover overlaps critical content or is cut off by the edge of the screen when triggered, change the orientation.
Black on black
Avoid using a black popover on dark backgrounds, it will completely disappear into the background.
White on white
Avoid using a white popover on light backgrounds, there is not enough contrast even with the subtle drop shadow.
A popover requires a trigger to be displayed. A trigger can be an icon, text, or another element that encourages a user to interact with it. To close a popover, a user must select the close button, make a selection outside of the popover, or press the Escape (esc) key.
If you need to place a popover above a form field, you may use an icon as a trigger. However, an icon is not the only visual element that can trigger a popover.
A popover and tooltip are triggered the same way on mobile, by a tap, but still have different use cases (see Usage).
Both popover variants have interaction states.
When a popover is triggered by a user pressing the Enter key, the close button must have focus in order for a user to have control over the popover and be able to interact with the links or close it.
|Tab||Moves the focus away from the close button.|
|Shift + Tab||Moves the focus to the previous link or to the close button.|
|Enter||Closes a popover or selects a link within a popover.|
|Escape (esc)||Closes a popover.|
A popover has the same proportions and spacing on both large and small screens.
Do not embed a popover or tooltip within another popover.
Too much content
Do not overload a popover with too much content.
No close button
Do not remove the close button from a popover.
A popover uses PatternFly 4 spacers to define spacing values between elements. Each popover orientation contains the same amount of spacing in between the component and icon.