Popover ​

Popovers are small overlays that open on demand. They let users access additional content and actions without cluttering the page.

Usage ​

Best practices ​

Popovers should:

• Always be positioned next to the button or other interface elements that triggers them.
• Be used for secondary or less important information and actions since they're hidden until users hit the trigger.
• Contain navigation or actions that share a relationship to each other.
• Be triggered by a clearly labeled button.
• Use a default or tertiary button for the trigger.

Content guidelines ​

If a popover contains actions, they should:

• Be clear and predictable: users should be able to anticipate what will happen when they click on an action item. Never deceive users by mislabeling an action.
• Be action-led: buttons should always lead with a strong verb that encourages action. To provide enough context to users use the {verb + noun} format on buttons except in the case of common actions like Save, Close, Cancel, or OK.
• Be scannable, especially when the popover contains a list of actions or options. Avoid unnecessary words and articles such as "the", "an", or "a".

If the popover includes a series of navigational links, each item should:

• Be concise but will give users enough information, so they can easily find and accurately navigate to the path they want.

Accessibility ​

Popovers usually contain an option list or action list, but can also contain other controls or content.

To assist screen readers with sending focus to an action list, pass autofocusTarget="first-node" to the Popover. This will avoid known issues a screen reader may have with keyboard support once focus is moved off the activator.

Web browsers assign a default value of menu to the aria-haspopup role. You can use the prop ariaHaspopup to specify a value. Screen readers may fail to send focus to the Popover content when they expect the content to be adjacent to the element with aria-haspopup in the DOM tree. In this scenario, it is recommended not to provide the ariaHaspopup prop.

Keyboard support ​

• When a popover opens, focus moves to the first focusable element or to the popover container.
• Once focus is in the popover, users can access controls in the popover using the tab key (and shift + tab backwards) and standard keystrokes for interacting.
• Users can dismiss the popover by tabbing out of it, pressing the esc key, or clicking outside of it.
• When the popover is closed, focus returns to the element that launched it.