Popover usage guidelines

A popover is an overlay element positioned relative to a trigger. It provides additional context without disrupting the user’s workflow.

When to use

• To provide supplementary information without shifting focus from the current view
• When the information is helpful but does not require immediate action
• To summarize extended details while offering an option to explore more
• When displaying content that wouldn’t fit naturally within the existing layout

When not to use

• For essential content and critical information, consider displaying it inline to avoid it being missed by users.
• Use a tooltip for short, non-interactive descriptions.
• Use a modal dialog for content that is crucial for task completion, or that provides additional context about an action.

Tooltip vs. popover
Tooltips and popovers are similar concepts that often get confused:

• Tooltips are shown when the trigger element is hovered or focused. They cannot contain interactive elements, they are inaccessible to screen readers, and they cannot be displayed on touchscreens.
• Popovers are shown when the trigger element is pressed. They can contain interactive elements, they are accessible to screen readers, and they can be displayed on touchscreens.

Usage

Preview

Press the button to make the popover appear.

Code

import { IconButton, Popover, PopoverRoot, Stack, Text } from '@cimpress-ui/react';
import { IconInfoCircle } from '@cimpress-ui/react/icons';

export default function Demo() {
  return (
    <Stack gap={16}>
      <PopoverRoot>
        <IconButton icon={<IconInfoCircle />} aria-label="More information" />
        <Popover title="Help">
          <Text as="p">Popovers can be used to provide contextual help.</Text>
        </Popover>
      </PopoverRoot>

      <Text as="p" variant="medium">
        Press the button to make the popover appear.
      </Text>
    </Stack>
  );
}

Properties

Placement

Preview

Press the buttons to make the popovers appear.

Code

import { IconButton, Popover, PopoverRoot, Stack, Text } from '@cimpress-ui/react';
import { IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp } from '@cimpress-ui/react/icons';

export default function Demo() {
  return (
    <Stack gap={16}>
      <Stack gap={16} direction="horizontal" wrap>
        <PopoverRoot>
          <IconButton icon={<IconArrowUp />} aria-label="Above" />
          <Popover placement="top" aria-label="Popover above the trigger">
            This popover is above the button.
          </Popover>
        </PopoverRoot>
        <PopoverRoot>
          <IconButton icon={<IconArrowDown />} aria-label="Below" />
          <Popover placement="bottom" aria-label="Popover below the trigger">
            This popover is below the button.
          </Popover>
        </PopoverRoot>
        <PopoverRoot>
          <IconButton icon={<IconArrowLeft />} aria-label="Left" />
          <Popover placement="left" aria-label="Popover to the left of the trigger">
            This popover is to the left of the button.
          </Popover>
        </PopoverRoot>
        <PopoverRoot>
          <IconButton icon={<IconArrowRight />} aria-label="Right" />
          <Popover placement="right" aria-label="Popover to the right of the trigger">
            This popover is to the right of the button.
          </Popover>
        </PopoverRoot>
      </Stack>

      <Text as="p" variant="medium">
        Press the buttons to make the popovers appear.
      </Text>
    </Stack>
  );
}

The placement of the popover with respect to the trigger element.

Best practices

• Use popovers sparingly, and display only one popover at a time to avoid cognitive overload.
• Do not put critical information in the popover.
• DO not use popovers for main content, but rather for additional information and help content.
• Do not put required form fields inside the popover, as it can be undiscovered or easily dismissed.
• Do not use primary buttons as trigger elements for a popover.

Formatting and layout

Placement

Popovers will appear below the trigger element by default, but placement can vary based on popover properties and available space within the viewport. The trigger should be an interactive element, for example an icon button. Ensure that the popover’s placement does not obstruct related content on the page.

Size

Popovers are sized dynamically based on the content inside. While the content can scroll, this is not advisable. For complex content, use a modal dialog instead.

Content writing

• Avoid duplicating content that is already provided elsewhere.
• Keep content concise, as too much information can overwhelm users.
• Use neutral phrases for trigger elements (e.g., “More details” instead of “Change details”).

Behaviors

Interaction

A popover is opened by pressing a trigger element. Popover traps focus within itself while it is open. When the popover is closed, focus is restored to the trigger element.

Persistence

Popovers persist as long as the user doesn’t interact with the outside content. Popovers can be dismissed by pressing the Escape key or by interacting outside of the popover bounds.