A popover provides contextual information or area for interaction to a specific element independent of the overall page layout.
When to use
Use a popover in the following cases:
- To provide additional information related to an element on the page.
- When content is too long for a tooltip.
- When users need to access additional functions without losing their current position on the user interface.
- To create a contextual relationship to an element on the screen that a dialog cannot provide.
- For feature prompts in guided tours, for example.
- To display setting, filter or sort menus.
- When displaying content in dropdown types, such as profile menus, split buttons and menu buttons.
Keep popovers at a reasonable size.
A popover should not take up too much screen space. It is meant to be a small moment that can open over different areas of a page. It should not disrupt the user’s workflow or take up the whole screen. Keep the content of a popover short and include only necessary information.
One popover at a time
If there are multiple places on a page where a popover can be found, only one should be opened at a time to avoid cluttering (of) the screen and ensure users can focus on the information that is being shown.
Do not hide critical information within a popover
Do not hide important information in a popover that users need to complete a task or workflow. Keep important information at a higher level so that users have a better overview.
No context arrow (default)
Use a popover without context arrow if the reference to the triggering element is clear due to the popover’s distance from the triggering element or its position.
With context arrow
- Trigger element, 2. Context arrow 3. Elevated container, 4. Content area
2. Trigger element
- An interactive element that opens the popover on click, hover or focus.
3. Context arrow (optional)
- An indicator added to a popover container to show the relationship between the popover and the element from which it was triggered.
4. Elevated container
- The area where the content will be placed.
5. Content area
- Placed content can be interactive elements, images, videos or text.
The type of content in a popover can vary depending on the use case. A popover can be simple and contain only text. Unlike a tooltip, in some cases, the content can be more complex and include a combination of multiple sections and interactive elements.
The following popover options are available:
Headline and text
A simple variant is to add a title and description that might include a link to additional information. For more content options see chapter infotip.
A popover is supposed to be a compact component, so the buttons inside it should be especially space-efficient. Use fluid buttons in the footer area in a popover. For more content options see chapter date time range picker.
Popover with sections
Add sections to break content that is too long or to divide the popover into meaningful areas. Avoid scrolling in popups with different sections. For more information see chapter form elements.
For less relevant actions buttons can be combined into a list. For more information see chapter menu.
By default, the popover will open where there is enough space. It may display above, below, to the right, or to the left of the trigger object as needed. It may display above, below, to the right, or to the left of the trigger object as needed.
Context arrow orientation
Popover context arrows are centered at the bottom, top, right, or side of the popover container. The default position of the context arrow is center-aligned at the top. However, the position can change dynamically depending on the position of the associated trigger object in the layout and the resizing of the viewport.
Opening and closing
The popover is opened by selecting a trigger element and disappears when clicking on the space or selecting content outside the element’s boundaries or when triggering a closing element like a button.
In some cases, popovers will open automatically, such as in guided tours.
This chapter shows several popover styles in the User Experience Toolkit.