Popover [Rich Content]

Overview

Popover is a floating rich content container for contextual information, actions, and structured layout that goes beyond a simple tooltip. Use it for user profile cards, filter panels, color and date pickers, notification centers, and any context where a tooltip would be too limited. For single-line hints use Tooltip, and for multi-line explanations use Info Tooltip.

When should you use them?

Use a popover when contextual content needs images, actions, inputs, or structured layout, like a profile card, a filter panel, or a date picker. When the content is just a sentence or two of text, use Tooltip or Info Tooltip instead, which are lighter and simpler.

How should you use them?

• Use a popover for rich, interactive content; use Tooltip or Info Tooltip for plain text hints.
• Trigger it on click rather than hover, since users need to interact with its content.
• Include a visible close control, since popovers stay open until dismissed.
• Position it so it doesn't cover the content the user is working with.
• Keep each popover focused on one task, like a single filter set or one picker.
• Manage focus inside the popover so keyboard users can navigate and exit it.