Popovers are reserved for situations like tooltips that provide additional information about the interface, but keep the UI clean. Popovers can include text, links, and rich HTML, which is not possible in a Tooltip.
When a popover is triggered by a click, it stays visible until the user clicks out of the area.
The popover can include rich HTML and CSS— opposed to a Tooltip, which only allows for a simple text string. This allows the design of popovers to flex to different use cases.
Popovers (default)
Orientation
The Popover has four different orientations: top, right, bottom, left. Use the orientation that aligns the Popover tip to the trigger.
🟢 Popover / orientation=Top
🟢 Popover / orientation=Right
🟢 Popover / orientation=Bottom
🟢 Popover / orientation=Left
Click Tips
Similar in nature to the Hover tip, the Click Tip provides additional context or support within the product; and as the name implies, it is triggered via a click.
The trigger for Click Tips should always use a ? icon, and if available, a link to supporting documentation.
🟡 Click tips / Active=False, Hover=False
🟡 Click tips / Active=False, Hover=True
Click tips reveal supporting information when clicking on a help icon to provide more context or detailed description.
Guidelines
Use cases
Provide additional context to a certain section of UI, that may require a link to support documentation
Give ‘peeks’ into metadata about a resource or item—such as List metadata
Provide contextual inputs or localized action confirmations
Do
If the content has less than 256 characters and doesn’t require a link, a Tooltip triggered on hover is preferred.
Use the <clickTip> component that includes the ? when triggering a Click tip (don’t attempt to recreate locally, change icon, or adjust interactive styles).
Don't
Place primary information inside of a Popover—it should be reserved for Tertiary information that’s not required or necessary in the current view or flow.
Use more than 1 Click tip inside a single UI element or container.
Ensure the popover does not cover other interactive content or crucial information.
Examples
Basic
Popovers can include descriptions or supporting information that reduce clutter in the interface. Popovers can also include a link to support documentation for further details.
Label group
Popovers can also house rich HTML, or even other components, like the overflow of labels applied to a campaign.
Interactive
Popovers can include interactive elements like an input field, that allows the marketer to take contextual actions.
Contextual info
When space is limited, popovers can help provide contextual 'peeks' into the data that might otherwise require the marketer to leave their current flow or view.
Content
Popover messages should be concise and brief—no more than two sentences. Link to external documentation for further explanation.
Include a title if the placement of the Popover makes the context ambiguous
Text for links that support documentation should use ‘Learn more’ and can be placed inline with the text or appended at the bottom of the Popover body
Accessibility
Keyboard Navigation:
Ensure it can be opened, navigated, and closed using a keyboard alone. Typically, this means using the Tab, Esc, Arrow, and Enter keys.
Support focus management: When opened, focus should move to the popover. When closed, focus should return to the element that opened it.
Screen Readers:
Use ARIA roles and properties correctly. For a popover, role="dialog" or role="tooltip" might be appropriate, depending on the content.
Ensure the popover content is announced by screen readers when it appears.
Include an accessible name and description.
Focus Trap:
When the popover is active, trap focus within it to ensure keyboard users can navigate its content without accidentally moving focus outside.
Dismissal
Allow clicking outside the popover or pressing the Esc key to close it.
Size and Positioning:
Ensure the popover does not cover other interactive content or crucial information.
Adjust positioning or provide mechanisms to dismiss or move the popover if it obstructs content on smaller screens.
Health
Popover
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova