Popover

The popover component displays floating informative and actionable content in relation to a target.

Usage

Use popovers:

To display additional information for an object in a compact way and without leaving the page.
To display additional UI elements such as fields, tables, images, charts and actions.
As a base layer for other components such as tooltips, overflow menus, dropdown menus.

Color usage

The Cegid Design System includes color usage for popover components.

The following color should be used for backgrounds: white

Types

Basic popover (without caret)

Popovers without a caret are typically used when the trigger button has a visually defined down state.

Positioned popover (with caret)

Popovers with a caret tip should be used 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.

The positioned popover has 12 different placement choices. The placement type defines how the popover will be positioned on the screen in relation to its trigger.

Anatomy and content

A popover component is made up of the following elements:

Popover (container)
Header and footer (optional): if the popover includes actions, they are usually displayed in the footer.
Content area: used to display text and interactive elements such as menus, options, additional actions, etc, depending on the context and need. Ensure that the content has a basic design and shows only the most important information.
Caret (optional): used to indicate the relationship between the popover and where it was triggered from
Elevation: 8dp

Behaviour and interaction

A popover component is triggered by an interactive element that causes the popover to open on click, hover, or focus. Usually, an icon button or text link.

The trigger button can open the popover on click, hover, or focus depending on what it is being used for.
The popover is closed when the user clicks outside the popover or selects an action within the popover.

Responsiveness and density

You can define a height for the popover. If the content exceeds the height, a scrollbar is displayed.

Popovers allow you to include interactive elements in order to make a component more accessible