Popover - Usage
Basic Guidelines
The Popover is a user-activated overlay to show contextual information. It is only used for supplementary content that isn’t essential to most users, yet relevant to the journey.
It should only be used where necessary because it’s more user-friendly to have content visible rather than hidden behind an interaction.
Don’t use the Popover for legal information that the user should be able to read easily, nor for content that the user should be able to easily copy and paste.
The difference between Tooltip, Popover and Modal
A Tooltip typically shows a short text and is triggered by hovering over a word or icon. It is generally not recommended to use tooltips, as they are inaccessible to touch devices.
A Popover shows a longer text, or a link to an external page. It is shown by clicking on an interactive element. The Popover remains visible until the user clicks outside of it.
A Modal is used to display long text, images and links. It covers a large part of the screen with a Scrim in the background or is displayed full-screen. Users typically click outside the Modal or use the close button at the top to close it.
Behaviour
The Popover needs a clickable element to trigger the appearance of the Popover. This can be a Button, Icon Button or a Text Link component.
A simple icon does not work as the trigger to open a popover.
A hover action does not trigger the Popover.
Variants Usage
The variant depends on the position of the trigger on the screen.
Left-aligned variant for an Icon Button positioned on the left-hand side.
Right-aligned variant for an Icon Button positioned on the right-hand side.
Centre-aligned variant for a full-width Button on mobile.
Alignment
On small viewports the Popover spans the full width (minus margins), aligning with the grid system set out in Foundations. It sits in-line with the rest of the text.
On larger viewports, the Popover component width is automatically limited to 30 characters (including spaces) per line, which is half of the standard line length.
The following example represents the use on a 12 column grid, and is downscaled to fit into this document.
Spacing
Use an 8px gap between the trigger element and the Popover.
Position
The Popover sits on top of any existing content. In Figma, use ‘absolute position’ to insert it on top of an auto layout.
