Popover
Popovers provide additional information upon interaction.
Table of Contents
Edit this section, Opens in new windowOverview
Popovers provide either related additional content on interaction.
Usage
Principles
- The arrow on the popover should always point to the element triggering the popover
- The arrow could be placed off center horizontally/vertically to match the initiating element and screen sizes
- The popover should always have a close button, but that can be omitted if the use case is good enough
- The popover is always closed if the user clicks the initiating element again or by pressing Close
- The popover is not a tooltip, if you want a tooltip, see the Tooltip component
- Clicking outside of the popover should close the popover
- Pressing Escape should close the popover
- A popover can be initialized on hover, focus or on click. Help - and Info Tooltips always open on click/touch
Positioning
The Popover component should preferably be positioned on top of the initiator, but there are some use cases where this is not applicable:
- A popover on hover for help and guidance in left aligned (aligned to the viewport) items or top aligned items
- When the initiator is above a certain threshold and instead of forcing the user to scroll to see the popover, the popover should be positioned under the initiator
- If there's not enough room for a popover to the left, align it to bottom
- If there's not enough room for a popover on the right, align to top
- On mobile, the popover, regardless of usage and form, should be aligned to the top. If there is no room for it (scroll), align it to the bottom
- And when used as a red validation feedback popover, it should always be aligned to the bottom. If there is no room for it (scroll), align it to top
Behaviours
Interaction
While it is not desired to have interaction elements in popovers, it is possible for very narrow use cases, like in a walktrough/guide setup with popovers.
A close button should always be present if the popover is initiated on click, and close the popover on click.
Modifiers
Position
The popover is positioned to the right
The popover is positioned to the top
The popover is positioned to the left
The popover is positioned to the bottom
As validation message
Small
The popover is positioned to the right
The popover is positioned to the top
The popover is positioned to the left
The popover is positioned to the bottom
Anatomy
- Popover
- Close (optional)
- Title (optional)
- Text
- The fill color is BR 1, BROWN
- The stroke color is BE 5, LIGHTEST BEIGE
- The text color is BE 5, LIGHTEST BEIGE
- The text color is BE 5, LIGHTEST BEIGE
Specs
Accessibility
- If you have space, don't use popovers. Just provide clear labels and sufficient body text.
- If it's a tooltip you are looking to use, decide whether the tip's content should be provided as the label or description and choose ARIA properties accordingly.
- Don't rely on title attributes. They are not keyboard accessible and are not supported in many screen reader setups.
- Don't describe popovers with aria-describedby. It makes the subject button non-functional to screen reader users.
Length
Due to its disruptive nature, popover content should be kept to an absolute minimum. For larger sets of content or data, consider using a Passive Modal. The Modal will be triggered when the user clicks the information icon.
Interactive elements
The primary purpose of a popover is to provide additional help or context to an item. Therefore, they should contain read-only text. The use of interactive elements, such as Buttons or Links, is discouraged.