Popover

Popovers are floating containers that display additional information or options in context with a trigger element. They are used to provide contextual actions or information.

Overview

Popovers are activated by hovering or clicking on a trigger element, providing a non-modal way to display extra information or options.

When to use

• Use a popover to present quick actions, such as options or settings related to a specific element or task.

• Use a popover for selecting options that relate to a specific task or element, such as editing or filtering settings.

• When the information displayed is transient and doesn’t need to remain on screen, popovers can efficiently communicate this.

• Use a popover to keep your page uncluttered by hiding supplementary actions or information behind a trigger.

When not to use

• Avoid popovers when the information is essential or needs to be always visible.

• Don't use popovers for workflows that require significant interaction or decision-making; opt for more structured components like dialogs.

• Avoid using popovers to navigate between views or pages. Popovers should maintain users in the same context.

• If a user needs to repeatedly interact with the content, don't use a popover as it might frustrate the experience.

• Use inline or always-visible elements. Popovers should not be used to display large blocks of text or complex layouts.

Types

Anatomy

1. Pointer: A small triangle connecting the popover to its trigger element, visually indicating the relationship.

2. Container: The main frame that holds the content of the popover, styled to float above other elements.

3. Dismiss Icon: A close icon (often an 'X') that allows users to dismiss the popover quickly.

4. Title: The heading of the popover that provides context to the content.

5. Description: The text within the popover that elaborates additional information about the context or actions.

6. Actions (Button Group): Buttons at the bottom of the popover that allow the user to perform related actions.

Alignment

Size

Size	Title (px)	Description (px)	Icon (px)	Corner (px)	Container Height (px)
Default	16	14	16	16	48

Accessibility

• Keyboard Navigation: Ensure popovers are fully navigable using the keyboard, allowing users to open, interact with, and close them without needing a mouse.

• Maintain Focus Control: When the popover is active, ensure that focus is trapped inside the popover until it is dismissed. Focus should return to the trigger element when the popover closes.

• Dismissible with ESC Key: Popovers should always be dismissible with the Escape key. This is critical for accessibility as it gives users control over closing transient content.

Example

• Action Options: A popover for selecting quick settings, such as filtering options on a search page.

• Inline Help: Hovering over a question mark icon displays a popover with helpful tips or explanations about form fields.

• Profile Preview: Clicking on a username opens a popover showing a brief user profile with quick action buttons like "Message" or "Follow."

• Notification Settings: A popover provides easy-to-reach options for configuring notifications when interacting with the notifications icon.