Popover

Popover

A popover presents information on whatever it points to on the canvas. 

Panel header

Introduction

Popovers are nonmodal dialogs that give the user contextual information and actions on canvas elements, and message users about errors and warnings.

Design Resources

Download Sketch Kit

Usage

Clicking a popover’s trigger element or node opens the popover, and either highlights relevant information or provides actions against the trigger element.

All popover messages must be:

  • Dynamically generated (based on builder file contents, with no static messages)
  • Actionable (the user can take action against the element)

Error Popover Variant

Any error that prevents a builder from being saved should appear in a toolbar popover.

Error messages include header text on a red background; footers are optional.

Wireframe showing an error popover.
Error popover

Warning Popover Variant

Any issue that prevents a builder from being activated or published, or prevents runtime, should appear in a toolbar popover.

Warning popovers include header text on a gold background; footers are optional.

Wireframe showing an example of a warning popover.
Warning popover

Panel Information Variant

This popover variant provides contextual editing for the name and description of a component in a panel header.

Wireframe showing an example of a popover for editing the information in a panel.
Popover for editing the information in a panel

Click to Create Variant

This popover variant lets users build workflows by selecting nodes, connectors, and other workflow elements from its menu. The “add” icon rotates 45° to look like a “close” icon when the popover is open, in addition to other animation changes.

Click to Create popover

List Menu

The list menu layout presents options visually.

Wireframe showing a Click to Create list menu.
Click to Create list menu

Visual Menu

The tile menu layout lets users select from a limited number of options.

Wireframe showing a Click to Create visual picker
Click to Create visual picker

Drill-in

For longer, nested option menus, add a drill-in and a search input. A back button lets users navigate branches of the original menu.

Wireframe showing a Click to Create drill-in.
Click to Create drill-in

Test Mode Variant

In manual workflow testing, users evaluate paths for logic and flow. At each decision point, a popover offers options (for example, an audience group or an event). To present two options, use two buttons side by side. For three to four options, stack the option buttons. For five or more options, add a scroll bar.

Two wireframe examples of test mode popovers, one featuring two buttons side by side, the other showing three buttons stacked.
Test mode popovers

Next: Validation