Popover

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.

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.

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.

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

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.

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.

Related elements or patterns

• Alert
• Footer
• Tooltip