Skip to main content Red Hat Design System logo Contribute on Github

Popover

Overview Style Guidelines

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](/elements/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 Character count
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

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.

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

Interaction states

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 #0066CC

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

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.

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

Best practices

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