Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Usage Guidelines
Popover must float within the viewport
Do
The entirety of a popover should be visible on the page for the user to view.
Don't
Alter the anchor positions to ensure the popover can always be visible for the user.
Use popovers to simplify content
Do
Offer to the point messaging. In this example, a clear warning is issued for an action that has permanent results.
Don't
If updates to the profile are not necessary to complete the task at hand, don’t include it in a modal.
When to use Popovers VS Tooltips
Popovers are triggered on click and are persistent. They are generally used for longer interactions. Conversely, tooltips are triggered on hover, contain no interactions, and are self-dismissed.
Do
The contents inside are rich in data, and additional actions can be performed. Therefore, the persistent popover is required.
Don't
In this example, using a tooltip will result in a non-persistent interaction and the inability to take action when hovering off of the trigger element.
Optional CTA Group
The CTA group nested within the popover component is optional. When a popover is placed within a form field, designers may make use of this optional toggle, given that the submit/confirmation action is performed at the form level.
Do
As this action is nested within a form flow, the user is required to submit all relevant information via the CTA in the footer. As such, there is no need to include a CTA group within the popover.
Don't
The use of CTA group within the popover here adds additional friction and duplicates the submission/next step action found in the form footer.
Related Components