Popover

Usage

Popovers are small overlays that open on click. They let users access additional content and actions without cluttering the page.

Popover can contain textual and actionable content. Popover triangular arrow points to the element that triggered it.

Popover arrow placement depends on the context of use and can appear at the bottom, left, right or top. Popover appearance should never cover the content that it is referring to if possible.

Behaviour

• Always be positioned next to the button or other interface element that triggers them

• Be used for secondary or less important information and actions since they’re hidden until merchants hit the trigger

• Contain navigation or actions that share a relationships to each other

• Be triggered by a clearly labeled button

Best Practices

• Popovers can be use when presenting a set of actions in a disclosable menu.

• Popovers can be use to present a combination of content, instructions, and actions in a panel for tasks that are of low or secondary importance to the current page. When used this way, popovers provide useful entry points to related features without overwhelming users.

• Popovers can be use to present secondary input tasks on demand.

• Don’t place popovers in a way that interferes with what the user is doing by obscuring the object of interest

Sizing and Style

Max-width: 400px, Padding: 12px, Font: Caption 1, Background: White 90%, Border: 1px Grey L80, Border radius: 8px