Popover

Examples

View in Pajamas UI Kit →

Structure

Guidelines

When to use

• You don't want the user to lose context, but still want to provide additional useful unique information about referring elements.
• It isn't critical for the user to act upon the information.
• You want to give a user a summary of extended information and the option to learn more if needed.

When not to use

• Consider if placing the content within a popover is needed at all. In many cases the most helpful, and boring solution, is to have the content inline and visible by default.
• If you're not providing rich markup or actionable items, consider using a tooltip.
• If you're displaying critical content needed for users to complete a task, consider using a modal.
• If you're displaying supplemental information to the user about an element or item, consider using a drawer.

Appearance

• By default, a popover is placed above the referring element.
• When there isn't enough space in the viewport, the popover is moved to the side or below as needed.
• If a popover blocks related content, the placement can be manually set to avoid this.
• To optimize for readability, content within a popover uses left-alignment.
• Be mindful of the popover content that could overflow the viewport, and avoid a popover that flexes 100% of the container width.
• A popover has a default width of 280px, but it can be adapted to have different sizes, depending on the content being wrapped.

Behavior

• A popover is opened by clicking on an element that has the sole purpose of triggering it.
• When the popover is visible, the Tab key moves focus through any interactive elements within it.
• A popover can be dismissed by:
  • Clicking on the close button within it.
  • Clicking outside of it.
  • The Tab key moving focus to another element.
  • The Esc key being pressed.

Content

• A popover can contain interactive content such as a link or button.
• A popover can contain rich content like an avatar.
• All copy within a popover should be short, actionable, and use clear language.
• The copy in the header should be shorter and even more concise than the copy in the body of the popover.

Accessibility

When a popover is visible:

• The focus can move to the next logical interactive element in the DOM and doesn't loop in the popover.
• The content within is next in the reading order from the trigger element and not appended to the DOM.