Popover

A Popover displays content in a non-modal dialog and adds contextual information or provides resources via text and links.

Popover component sample

A popover should include text and interactive elements like a close button and links.

Popover component blueprint

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)

Popover component, black variant

White (dark backgrounds)

Popover component, white variant

With heading

Use for messages that require a heading.

Popover component, with heading variant

Without heading

Use for messages that do not require a heading.

Popover component, without heading variant

With drop shadow

A drop shadow gives a popover subtle elevation above light backgrounds.

Popover component, with drop shadow variant

Without drop shadow

A drop shadow cannot be seen on dark backgrounds, so it is not included.

Popover component, without drop shadow variant

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)

Popover component, light theme

White (dark backgrounds)

Popover component, dark theme

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.

 Popover component usage, content

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.

 Popover component usage, orientation

Black on black

Avoid using a black popover on dark backgrounds, it will completely disappear into the background.

 Popover component usage, black on black

White on white

Avoid using a white popover on light backgrounds, there is not enough contrast even with the subtle drop shadow.

 Popover component usage, white on white

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.

 Popover component behavior, trigger

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.

 Popover component behavior, form

Mobile

A popover and tooltip are triggered the same way on mobile, by a tap, but still have different use cases (see Usage).

 Popover component behavior, mobile

Both popover variants have interaction states.

Default/Focus (black)

Popover component interaction state, default and focus

Default/Focus (white)

Popover component interaction state, default and focus
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)

Popover component interaction state, hover and active

Hover/Active (white)

Popover component interaction state, hover and active
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

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.

 Popover component accesssibility
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.

A popover has the same proportions and spacing on both large and small screens.

Large screens

Popover component responsive design, large screens

Small screens

Popover component responsive design, small screens

Embedding

Do not embed a popover or tooltip within another popover.

Popover component best practice 1

Too much content

Do not overload a popover with too much content.

Popover component best practice 2

No close button

Do not remove the close button from a popover.

Popover component best practice 3

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.

Popover component spacing

To give feedback about anything on this page, contact us.

To learn how to use our other components in your designs, visit the Components section.