Popovers open on demand to bring attention to specific actions without cluttering a page. Popovers help customers complete a small, focused task, such as adding or making changes to QuickBooks data.

When to use popovers

Use popovers when customers need to select or enter data while they are completing another task. With popovers, we don’t take customers away from the page they’re on.

Popover data is usually small enough that we don’t need to launch a trowser to complete the tasks. If customers need to enter more than one piece of info, consider breaking the popover into two separate steps.

Example

 

Appearance

  • Popover appears with a caret
  • Pover uses Gray primary button (Gray 01) 
  • Popover recommended to have title, but it is optional
  • Popover recommended to have an action button, but it is optional 
  • Popover should always include a close button 
  • Popovers can also be used with numbered list or bullets to highlight list elements
  • Popovers can allow for interaction with use of controls such as textfield, buttons, checkbox, and so forth.

Behavior

  • Popover appears when a component is triggered on click. 
  • Popover can appear from button, dropdown typeahead, and links. 
  • A caret is used to provide attention and context.

Actions and controls

Animation

For guidance on how popovers enter (appear) and exit (disappear), see the QuickBooks Animation Library in GitHub.
 

Responsive

On mobile breakpoint sizes below 480px, the properties change to:

Width:100%
Height: 100%
Margin: 16px

Keyboard behavior:When the keyboard is initiated, the popover will move up to accommodate keyboard space. Once the keyboard is closed, the popover will return to its original position. 

Scroll behavior:When content extends past the viewing area, a scroll bar will appear and scrolling will happen only to the popover in the foreground.

 

Content guidelines for popovers

  • Keep popover content brief. Customers need to make a selection or enter information quickly and keep going.
  • If the popover presents a dropdown list, you can use the word Select as the first item to help customers know what to do. Don’t use Choose.
  • Dropdown list items should be sentence case when they’re more than one word.
  • If the dropdown list displays text content, present that content in alphabetical order, starting with A.
  • If the dropdown list displays numerical content, present that content in order from lowest to highest.

 

 

  • Was this Helpful?
  •