Popover

Popover can be used to provide an extra information that contain a call to action or link

A popover is a component that is placed above any other content on the page, to provide new or specific information. Popovers can appear one at a time and must contain an interactive element such as a button or link.

- When you need to add an interactive item such as CTA or link to bring more information about a component or make it more accessible.
- When you need to provide guidance into an interface. In the case you need to use more than 3/4 popovers, prefer using a modal.

- To add extra information about a component that doesn’t need or require an iteractive element. See tooltip

Do / Don't

DO	DON'T
Use popover when you need to provide extra information and actions about a UI element or new feature.	Don’t use popover to provide a short text or a description.

DO	DON'T
Use popover when you need to provide an interactive action.	Don’t use popover without a call to action. Use tooltip instead

DO	DON'T
The popover should be positioned next to the content to which it provides additional information.	The popover covers the content to which it relates.

DO	DON’T
To close popover, you must : click outisde, use xmark or a CTA.	The popover should not be closable only with the xmark.

Popover

When to use : Popover ?

Do / Don't