What is a popover in UX design?
A popover is a UI component that appears as a floating overlay attached to a trigger element when the user clicks or taps it. Unlike a tooltip, a popover is triggered by an intentional click rather than hover, can contain interactive elements such as buttons, links, and form controls, and persists until the user explicitly dismisses it by clicking outside, pressing Escape, or using a close control. Popovers are used for contextual actions, supplementary information panels, inline editing, and content previews.
When should you use a popover vs a tooltip?
Use a tooltip for brief, non-interactive supplementary information that appears on hover and disappears when the user moves away. Use a popover when the content is richer, when it contains interactive elements the user needs to engage with, or when the content should persist while the user reads or acts on it. A tooltip answers "what is this?" A popover enables "do something with this." If you need users to click a button, follow a link, or fill in a field within the overlay, use a popover rather than a tooltip.
How to design accessible popovers?
Popovers triggered by click must be accessible to keyboard users. The trigger element must be a focusable, interactive element. When the popover opens, focus should move into it if it contains interactive content, or remain on the trigger if it is purely informational. The popover must be dismissible via the Escape key. If focus moves into the popover, it must be able to return to the trigger when the popover closes. Popovers must not block access to other content when open, distinguishing them from modals which require exclusive focus.