Change log
Components
Popover
- Overview
- Usage
- Accessibility
When to use
Provide additional useful but non-critical information and actions about referring elements.
When not to use
Consider if placing the content within a popover is needed at all. It might be more helpful to have the content inline and visible by default.
For short, non-actionable information, consider using a tooltip.
Principles​
A popover is used to provide useful information about an element, including one or multiple actionable elements. It gives the user additional information without forcing them to act upon it like in a dialog.
A popover is opened by clicking on an element that has the popover attached to it. Do not trigger popovers on hover as they may contain interactive elements and some users may find it difficult to interact with those elements.
A popover can be dismissed by clicking on the close button within it, clicking outside of it or pressing the Esc key on the keyboard.
The title of a popover should be clear and concise and preferably fit to one line, or 2 lines at maximum. Try to keep the content of a popover also as short as possible.
Only one popover can be visible at a time.
Having a title in a popover is recommended, but it may be omitted if needed.
Size​
On mobile screens the popover has the same width as the content area, by default. The width may be reduced if needed.
On larger screens the default width is 400px. This may be reduced or increased if needed, but should not exceed 600px.
The height of the popover is determined by the content and should never exceed the height of the viewport. Try to keep the height below 400px.
Placement​
By default, popovers should be placed above the referring element. When there isn't enough space in the viewport, the popover is moved to the side or below as needed.
Pointer​
Popover has a pointer to help show the relationship between the popover and where it was triggered from.
There are predefined positions for start, center and end. Position of the pointer may also be adjusted manually if needed.
Interactive content​
Popover can contain links and buttons.
Custom content​
Popover can also contain custom content.
Usage guidelines​
Short content​
Don’t use a popover for simple labeling, i.e. providing a label for the icon button. Use a tooltip instead.
Do
Don't
Position​
Make sure that the popover is always fully visible inside the viewport.
Do
Don't
Size​
Keep the width of the popover below 600px. Do not stretch it to 100% of viewport width (except on mobile screens).
Do
Don't
Accessibility​
- Popovers take focus on appearance, and the tab order is constrained to the popover’s controls until the popover is closed by choosing one of the buttons or links with Enter or Space, or is dismissed by pressing Esc.
- When the popover is closed, the focus should return to the element that triggered the popover. This allows keyboard and screen reader users to continue where they originally opened the popover.