Popovers

Popovers come in a few flavors: form popovers and date pickers, and appear to “pop over” the main content on the screen to allow for secondary task completion.

Web

When to Use

  • When the user is attempting to complete a data entry task while completing another task, and
  • When the amount of data to be entered is too small to warrant a Trowser.

Appearance & Behavior

Form Popovers

The maximum width for a form popover is 530px.

If launched from a button or icon, it should use a pointer arrow. If launched as a second step from a drop down, it should not use an arrow and instead should replace the overlay part of the drop down.

Form Popovers should always use secondary and tertiary buttons, since they are secondary tasks. We don’t want to introduce competition for the primary call-to-action on the page.

A heading is optional and should only be used if it adds meaning and value to the interaction, such as when launched from an icon. If launched from a button, there’s no need to repeat yourself!

PopoverArrow

Default form popover

PopoverNoArrow

Example of form popover triggered by dropdown overlay

© Intuit 2016 | Terms of use