Popovers provide additional information upon interaction.
Table of ContentsEdit this section, Opens in new window
Popovers provide either related additional content on interaction.
- 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
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
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.
As validation message
SmallEdit this section, Opens in new window
- 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.
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.
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.