Popover

When to use

• Use when placing interactive elements, like links, buttons, or rich media to make the component more accessible. Disclosures that contain interactive elements use popovers as a base container layer to achieve this accessibility standard. For further guidance on how to display content within a popover, see the disclosure pattern.

• Use when you need to display additional details for specific elements on a page. If your popover exceeds four columns in width, use a modal instead.

When not to use

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.

Variants

By default, a popover's structure is made up of a container with no additional tip. Depending on the use case, caret tips or tab tips can be added to the container to help show the relationship between the popover and where it was triggered from.

Anatomy

1. UI trigger button: An interactive element that triggers the popover to open on click, hover, or focus.
2. Tip: An indicator that is 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.

Sizing

Main elements

Heading, body, and footer content can vary based on your use case. To see examples of content used in popovers, see the disclosure pattern.

Overflow content

Scrolling is usually not needed when using a popover. If scrolling is needed, in a dropdown like situation for instance, then 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.

Further guidance

For further content guidance, see Carbon's content guidelines.

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. Direction options vary depending on the popover variant.

When a popover does not have 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.

Alignment

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.

Placement

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.

Alignment

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.

Similarly with no tip popovers, a trigger button paired with a caret tip popover should be placed 4px away from the popover container.

Placement

Tab tip popovers nest within another layer on a page. 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.

Alignment

Popovers with a tab tip have 0px space between the trigger button and the container because they are connected to each other.

Interactions

Nesting

Placing one popover inside another can cause confusing interactions and accessibility issues. Consider using a modal or a different experience instead.

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.

Colors

Popovers are most commonly used in these three different container colors—$layer-01, $layer-02, and $background-inverse.

Corners

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.

Form components

Form components that have menus, like dropdowns, use popovers as a base layer.

Disclosures

Disclosures use popovers as a base layer. Disclosures are comprised of a popover container, text, and interactive elements. For further guidance, see Carbon's disclosure pattern.

Overflow menus

Overflow menus use popovers as a base layer. When the overflow menu icon button is triggered, the menu opens and uses a tab tip popover as its base. For further guidance, see Carbon's overflow menu.

Toggletips

Toggletips use the popovers as a base layer. Toggletips allow interactive elements within the popover container while still being accessible. For further guidance, see Carbon's toggletip component.

Tooltips

Tooltips use popovers as a base layer. Tooltips are comprised of a trigger button, popover container and text. For further guidance, see Carbon's tooltip component.