Popover

Popover is a container that when triggered positions itself above other content on the page, but are non-modal. Typically the popover contains a title and a text section, however the option to add additional content is available.

Usage

Use popovers to provide supplementary information that may not be directly available in the main interface. Popovers are typically used for contextual help, but it may also support other small pieces of inline information or guidance.

Contextual help

Contextual help provides in-place guidance in situations where users need extra support to complete a task, a popover can be a suitable component for the task.

An example of a Popover being used for contextual help.

Essential content

Be sure to not hide important information or controls within a popover, essential information or controls should be part of the main interface.

Use Popovers to provide additional information.

Don't hide essential information in a Popover.

Alternatives to the Popover

Tooltips and popovers serve similar purposes, but tooltips are restricted to brief text content, while popovers allow more flexibility in regards to type of content. Tooltips appear on hover while popovers are opened with a click or tap.

Formatting

Anatomy

The Popover consists of title and text, along with an optional container that can be filled with configurable content.

In its default configuration the popover features a title and text, a setup which should support typical contextual help scenarios. The popover also features a toggleable content slot, that can be replaced to add custom content.

A – Container
B – Title
C – Message
D – Content slot

Content slot

Use the content slot to add to, or replace the default content.

The content slot can be used to add e.g. media, like an image, or to replace the default content completely.

A popover with custom content.

Text content

The default configuration features a title and a message text.

Use the title to define the context, and the text section to convey your message. Be mindful to not fill a popover with an excessive amount of content. Keep the content brief and to the point.

Behavior

The Popover component will appear on top of the content of the page and position and size itself to stay in visual connection to the triggering ui-element.

Sizing

The popover occupies a portion of the available screen width in order to not blend in with the underlying content.

The popover fills 80% of the available horizontal content section, while also being constricted by a minimum of 240 px and maximum of 400 px. Vertically the popover expands to support the content.

Popover in its minimum and maximum width configuration.

Placement

The Popover is anchored to the triggering ui-element, and stays visually connected to it.

Popovers attempts to position itself with a gap of 4px below of the triggering ui-element. If there is not enough available space in the viewport below, it will shift to a position above.

Horizontally the popover will attempt to position to the centre of the trigger but will remain within the viewport. For example if the origin is on the left edge of a page the popover will shift to the right to remain fully visible.

Default placement bottom centre of the trigger

The Popover shifting position to remain fully visible on the page

Multiple popovers

Avoid allowing multiple popovers to be open at a time.

Trigger

Typically, the trigger for a popover is an icon button.

In most situations the trigger for the Popover may be an Icon button, but other ui-elements may be appropriate, depending on the context.

Dismissal

Dismissing the Popover should be easily accomplished.

Popovers should be dismissable by:

1. Interacting with the triggering ui-element

2. Interacting with another part of the page

3. Performing a confirming action within the Popover (if applicable)

4. Pressing the esc-key on a keyboard (in applicable devices)

Examples of how a popover can be dismissed.