In a form or a flow, users might see popovers to help them fill out the form or select a date. Popovers appear over the content on the screen to allow users to complete a small, focused task.
Without taking users away from the screen they’re working on, popovers give users a way to select or enter information when filling out forms or task flows.
- When the user needs to select or enter data while they’re completing another task, and
- When the amount of data is small enough so that we don’t need to launch a trowser. What is small enough? Generally one piece of data (such as a name, dollar amount, or address) is the right size. If users need to enter more than one piece of information (such as name and address), consider breaking the popover into two separate steps.
Appearance and behavior
There are two kinds of popovers: form popovers and date pickers.
Form popovers help users enter information while they’re filling out a form. The maximum width for a form popover is 530 pixels.
Date pickers help users select a date, generally the day and year. These popovers appear and behave as specified in the date picker component.
If launched from a button or icon, the popover should appear with a pointer arrow. If launched as a second step from a drop down, the popover appears without an arrow and instead should replace the overlay part of the drop down.
Try to simplify popovers to show only one call to action, a primary button. If you need to show another call to action, use a text link or secondary and tertiary buttons. The goal of popovers is to keep users moving forward and completing tasks quickly. Don’t distract them from the primary call to action.
You might add a heading to a popover, but only if it adds meaning and value to the interaction, such as when the popover is launched from an icon.
Don’t show a heading if the user opens the popover from a button. The button itself provides plenty of context. There’s no need to repeat yourself!
Content guidelines for popovers
- Keep popover content brief. Users 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 users 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.
- Recommended voice and tone attribute: Straightforward
In this example, the user records the payments she received on an invoice. To help complete the task, she can launch popovers for payee name, taxable subtotal, and discount.
This example shows how a popover can help a user find payee information by invoice number.
The maximum width for popovers is 530 pixels.
Pointer arrows are off by default. If launched from a button or icon, the popover should appear with a pointer arrow.