Popover

Popovers are floating, dismissible containers for small to medium amounts of content and interactions.

Overview

Popover is useful for providing non-critical interactions in space restrained workflows, which float over other elements in the z-axis. Avoid putting large amounts of content and using scrollbars in Popovers. Popover positioning can be automatic or set manually by using the placement or overlayPositioning properties respectfully.

It is recommended to place Popovers shallowly in the DOM.

For minimal text-only content, consider using Tooltip. For workflows that require more space and focus, consider using Modal.

Usage

  • Secondary workflow support that can be invoked from an action
  • Descriptions of content
  • A few contextual actions or inputs to modify an element
  • Clicking an element to show date, author, or other relevant details

Sample

Best practices

Below are important guidelines on using the Popover component.

Correct Popover content length
Do use Popovers for small to medium amounts of content.
Avoid Popover content length
Avoid using Popovers for one sentence of copy or less. Defer to using Tooltip for shorter copy.
Correct Popover workflows
Do use Popovers for small, focused workflows.
Avoid Popover workflows
Avoid using Popovers for complex workflows. Instead consider using a Modal.

Accessibility

Focus order

The Popover's focus will navigate content sequentially to preserve meaning and expected use in support of Success Criterion 2.4.3: Focus Order. For this reason the first element depicted visually in the Popover will recieve keyboard focus, such as the component's close button (default).

Keyboard focus

It is strongly recommended to have focusable elements cycle through Popover where focusTrapDisabled is false (default) to support assistive technology users. The expected behavior for assistive technologies is while the component is open only the contents and focusable elements are accessible.

Keyboard navigation

KeyFunction
TabMoves focus to next focusable element. If the current focus is the last element and focusTrapDisabled is false, focus will cycle to the first element.
Tab and ShiftMoves focus to previous focusable element. If the current focus is the first element and focusTrapDisabled is false, focus will cycle to the last element.
EscCloses the component.

API reference

Properties

Slots

Styles

Events

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.