Popovers

Popovers are opened with a click or tap (not on hover).

Required elements for a popover include:

• Title
• Body content (see below)
• Close X button

Popover content should be brief. A popover should contain no more than two paragraphs of text, or one image and one paragraph (for example, a product image with a review snippet).

A popover should contain no more than two links in its content. Interaction with these links should be optional. If interaction with such content is required to proceed, then use a modal instead of a popover.

To close a popover, select the X button within it, or anywhere outside of it.

When there's insufficient space to display a popover on-screen without visual clipping, it changes its orientation in relation to the triggering element.

• A popover on the top or bottom switches to the opposite orientation.
• A popover on the right or left switches to the opposite orientation, or to the top if there's insufficient lateral space.

On smaller breakpoints, popovers become centered overlays (similar to modals) that aren't positioned in relation to the triggering element. Again, tap the X button inside the popover, or anywhere on the tinted area outside of it, to close it.

‍

Keyboard Operation

Unlike modals, Tab and Shift + Tab will move focus outside a popover and thereby close it.

Tab key moves focus to the next tabbable element inside the popover. If focus is on the last tabbable element, then close the popover and return focus to the triggering element.

Shift + Tab keys moves focus to the previous tabbable element inside the modal. If focus is on the first tabbable element, then close the popover and return focus to the triggering element.

Escape key dismisses the popover. This is equivalent to selecting the X button within it.