Variant
Default
By default, popover must contain at least one interactive element. In this case, we can add extra information such as a visual icon on the top left-hand corner, and use a CTA or a link to provide an interactive element.
Double CTA
In some cases, we might need another CTA to bring a different action. In this case, we can add a button on the left.
Placement
Popover position
Popover must not hide the information linked to it. You can choose between all those positions:
Call to action position
The position of CTAs, such as buttons or links, should always be aligned to the right when they stand alone.
Behavior
Light vs Dark mode
Show and close popover
Popover should appears when:
- A user click on a UI element
- You need to highlight something - such as a new feature. The popover should appear as soon as the user reach the page.
To close the popovever, you have 3 possibilities:
- Using a CTA, such as the button
- Using the X-mark, when the CTA provide a different action than the one to close
- Tap outside of the popover
