Close

Popovers

Popovers display brief, contextual information or supplemental content that does not otherwise fit into a certain area of the page.

A popover may contain up to two paragraphs and no more than two links.

Popovers are used on MD breakpoint and larger, however they become modals on SM and XS breakpoint to increase the likelihood that all content will fit on-screen without scrolling.

Design System Guidelines

You will need to also copy the div "dds__overlay" along with the desired popover in order to tint the background on smaller breakpoints.

Popover from Help Icon

Example of inline help icon with popover 

Heading

Popover is a small overlay window that appears on top of the main window. It typically contains short explanatory information.

Popover from Buttons

These are listed in order of preference (i.e. try using a Popover On Top before a Popover On Right, etc.).

Required: Headline, divot and close icon

Popover is a small overlay window that appears on top of the main window. It typically contains short explanatory information.

Popover Top

Required: Headline, divot and close icon

When to use: Ok to use for content types that are never more than 2 paragraphs in length (or the rough equivalent of 2 paragraphs in text and images). Can include 1 or 2 links as part of content. When not to use: Do not use popovers to display more than 2 paragraphs of content or complex interactive functions.

Link option
Popover Right

Usage

Divot points to the objet that spawned the popover. Initiating object could be any CTA, text link, image, or icon, as defined at the project level.

Popover Bottom

Responsive

Popovers become modals to increase the likelihood that all content will fit on the screen without requiring scrolling.

Popover Left