Popover
Overview
A Popover displays content in a non-modal dialog and adds contextual information or provides resources via text and links.
Sample component
Component status
Style
A popover should include text and interactive elements like a close button and links.
Variants
Black and white are the two popover variants available for use depending on the content and color of the background.
Warning
A heading does not need to be included, but if links are not included either, use a Tooltip component instead.
Black (light backgrounds)
White (dark backgrounds)
With heading
Use for messages that require a heading.
Without heading
Use for messages that do not require a heading.
With drop shadow
A drop shadow gives a popover subtle elevation above light backgrounds.
Without drop shadow
A drop shadow cannot be seen on dark backgrounds, so it is not included.
Theme
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)
Usage
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.
Content
Content in a popover should include text and interactive elements like a close button and links. If more explanation is needed, a heading can be included as well.
Warning
If content is very short and does not include links, use a Tooltip component instead.
Character count
A popover heading and body text can have more characters if the overall message creates a more helpful user experience.
Warning
Do not write short body text because a user might get stuck or not understand what to do next if the content is too brief.
| Element | Maximum characters |
|---|---|
| Heading | 25 |
| Body text | 100 |
| Single link | 35 |
| Two links | 15 (each) |
Orientation
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.
Behavior
Trigger
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.
Form
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.
Mobile
A popover and tooltip are triggered the same way on mobile, by a tap, but still have different use cases (see Usage).
Interaction states
Both popover variants have interaction states.
Default/Focus (black)
Default/Focus (white)
| Variant | Interaction state | Element | Specs |
|---|---|---|---|
| Black | Default/Focus | Close button | #D2D2D2 |
| Black | Default/Focus | Link | #73BCF7 |
| White | Default/Focus | Close button | #6A6E73 |
| White | Default/Focus | Link | #06C |
Hover/Active (black)
Hover/Active (white)
| Variant | Interaction state | Element | Specs |
|---|---|---|---|
| Black | Hover/Active | Close button | #FFF |
| Black | Hover/Active | Link | #BEE1F4 |
| White | Hover/Active | Close button | #151515 |
| White | Hover/Active | Link | #004080 |
Accessibility
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.
| Key | Action |
|---|---|
| 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. |
Responsive design
A popover has the same proportions and spacing on both large and small screens.
Large screens
Small screens
Best practices
Embedding
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.
Spacing
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.
Feedback
To give feedback about anything on this page, contact us.
Foundations
To learn how to use our other components in your designs, visit the Components section.
