Popover definition and basic behavior
A popover is a layer that pops up over all other elements on a page. Only one popover can appear at a time and can contain varying text and interactive elements.
popover
28 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
When to use popover
Use a popover when placing interactive elements like links, buttons, or rich media to make the component more accessible. Use when you need to display additional details for specific elements on a page. If the popover exceeds four columns in width, use a modal instead.
When not to use popover
Avoid nesting popovers or placing popovers within other popovers. This can create confusing interactions and accessibility issues. Consider using a modal or a different experience instead.
Popover variants
Popovers have three variants: No tip (used when the trigger button has a visually defined down state), Caret tip (used to show the relationship between the popover and where it was triggered from, typically when the trigger button does not have a visually defined down state and for icon buttons), and Tab tip (used when the popover is connected to a toolbar or header area).
Popover anatomy
A popover consists of: (1) UI trigger button - an interactive element that triggers the popover to open on click, hover, or focus; (2) Tip - an indicator added to a popover container to help show the relationship between the popover and where it was triggered from; (3) Content area - an area to place text and interactive elements; (4) Container - an area to place text and interactive elements.
Popover container width recommendation
The width of a popover container can vary depending on the amount of content placed within it. Do not exceed a popover width size of four columns.
Popover trigger button controls
A popover is controlled by a trigger button. By default, an icon button is used to trigger a popover to open. However, as long as the trigger button is interactive it can visually change its shape and size depending on the use case. The trigger button can open the popover on click, hover, or focus depending on what it is being used for.
Popover overflow content behavior
Scrolling is usually not needed when using a popover. If scrolling is needed, the body section should scroll vertically with the header and footer remaining fixed in place if those elements are present. Do not scroll horizontally or let content bleed off the page.
Popover no-tip placement
For popovers without a tip, the trigger button should be flush to the side of the popover. The popover can open from the left, right, bottom, or top of the trigger button.
Popover no-tip spacing
For popovers without a tip, the trigger button should be placed 4px away from the popover container and should always be the same distance away from the popover container regardless of what size button is being used.
Popover no-tip alignment
For popovers without a tip, the popover edge should be flush aligned with the trigger button.
Popover caret-tip usage
A caret tip should be added to a popover to help show the relationship between the popover and where it was triggered from. A caret tip is typically used when the trigger button does not have a visually defined down state and for icon buttons.
Popover caret-tip placement
For popovers with a caret tip, the popover can open from the left, right, bottom, or top of the trigger button. When using a caret tip, the trigger button and caret tip should be vertically centered with each other.
Popover caret-tip alignment options
For popovers with a caret tip, the container of the popover may be aligned to start, center, or end to keep the container from bleeding off the page or covering important information.
Popover caret-tip spacing
For popovers with a caret tip, the trigger button paired with the caret tip popover should be placed 4px away from the popover container.
Popover caret-tip alignment with trigger
For popovers with a caret tip, the caret tip should be center aligned with the trigger button.
Popover tab-tip usage
Popovers can have a tab tip when the popover is connected to a toolbar or header area where the trigger button sits within.
Popover tab-tip placement
For popovers with a tab tip, the tab tip can appear on the left and right of the container and the edges should be flush with the layer edges it sits within.
Popover tab-tip spacing
For popovers with a tab tip, there is 0px space between the trigger button and the container because they are connected to each other.
Popover tab-tip alignment
For popovers with a tab tip, the tab tip should be top aligned with the layer behind it.
Popover mouse interactions - hover
With hover interaction, open the popover by hovering over the trigger button. Close the popover by hovering off of the popover or clicking anywhere outside of the open popover container.
Popover keyboard interaction - focus
When the popover control has focus, pressing Enter or Space activates the popover control and toggles the visibility of the popover content.
Popover screen reader interaction
With VoiceOver, JAWS, and NVDA, users can trigger a button to open a popover by pressing Enter or Space while the button has focus.
Popover nesting with tooltips
Tooltips can be used on interactive elements within a popover, but consider their placement carefully. Ensure tooltips are positioned in a way that prevents them from being cut off within the popover container.
Popover container colors
Popovers are most commonly used in these three different container colors: $layer-01, $layer-02, and $background-inverse.
Popover container corner radius
A popover container has rounded corners by default and the corner radius is set to 2px. Use straight corners when the popover structure contains a tab tip and is connected to a toolbar or header to keep clean lines between the popover and the layer underneath.
Popover directional placement
Popover directions by default are set to auto. Upon opening, popovers can detect the edges of the browser to properly be placed in view so the container does not get cutoff. Alternatively, popovers can also specify distinct directions.
Popover as base layer for other components
Popovers are used as a base layer in several components: form components that have menus like dropdowns, disclosures, overflow menus, toggletips, and tooltips.