Popover Planned

Use a popover to answer a question, explain something, or provide a user with guidance to help them complete a task.

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 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.

A popover heading and body text can have more characters if the overall message creates a more helpful user experience.

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.

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

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.

Do not embed a popover or tooltip within another popover.

Do not overload a popover with too much content.

Do not remove the close button from a popover.