Published in · 11 min read · Jul 16, 2023
Episode #2 of the UX Patterns series. 👉 UX Patterns knowledge base
Today, we’re going to talk about popups, dialogs, tooltips, and popovers.
Those 4 terms cause a lot of confusion when it comes to distinguishing between them and making decisions regarding when to use which one 😳. We will analyze them, their elements, what to pay attention to when designing them, and what are the common mistakes and misconceptions.
All of the elements — popups, dialogs, tooltips, and popovers — are displayed on top of the interface covering the content entirely or partially.
👉 This is probably why they are often mislabeled or misused.
‘Popup’ is a generic term that refers to any temporary overlay that appears on top of the main content or interface.
Popups are above all other elements on the Z-axis.
They usually require interactions ☝️from the user or provide additional information. Popups can vary in size — from very small to full-screen.
Popups can serve various purposes, including notifications, alerts, or even modal dialogs.
All of the remaining elements that we will talk about today, so dialogs, tooltips, and popovers are included in the group of popups.
As I mentioned, popups are included in a group called ‘overlays’.
An overlay is a broader term that describes various graphical elements or layers that are displayed on top of the existing user interface or content.
💡 The main difference is that popups serve the purpose of enabling interaction or providing information, whereas overlays also include purely graphical elements.
We will be comparing various types of popups (dialogs, popovers, and tooltips) based on the following 3 aspects:
Constrained focus — modal vs. non-modal
The key difference between modal and non-modal elements lies in the level of interruption and interaction restriction.
- Modal elements demand user attention by blocking interaction with the rest of the interface until the task is addressed. They interrupt the workflow and have the highest level of importance. Users cannot access the underlying layer either via regular not keyboard navigation. Modals have their own context.
- Non-modal elements allow users to interact with the interface without requiring immediate attention or interrupting the overall workflow. They do not impose context.
💡 In some design systems, you can encounter a component named ‘modal’. Usually, it is a modal dialog that we will talk later on. In my opinion, it’s a naming inconsistency since…
Modality is a characteristic, not the name of a component itself.
Backdrop
In some cases, popup elements have a backdrop. Usually, it’s an overlay with lowered opacity that serves as a visual cue that…
Signalizes that the content behind it is not available for interactions ❌.
It helps users focus on the popup and avoid confusion when trying to interact with the main page content.
Light vs. explicit dismiss
The third dimension to consider is how users dismiss a component.
- Explicit dismiss is when a component allows a user to dismiss it, for example, using a close button (x icon), cancel button, or the escape key.
- Light dismiss means that a component disappears automatically under certain conditions (scroll the page, click outside of the component, or hover out of the button that was triggering it).
Dialogs are used to present information and prompt user to input data or make a decision. They usually contain text, form fields, select controls, and buttons.
Dialogs are a type of popup.
In many cases, we see modal dialogs that interrupt the flow, but dialogs can be both modal and non-modal. If it’s a modal dialog, usually, a backdrop is displayed behind it to lock the user in the context visually.
For non-modal dialogs, the backdrop is not needed. Dialogs usually have ‘explicit dismiss’, via a close button (x icon), a ‘cancel’ button.
Dialogs are really versatile. There is a long list of use cases. I’ve selected the most common ones to share with you:
- 🚨 Alert dialogs display critical messages or notifications to the user. They typically require the user to acknowledge the message by pressing a button like an ‘OK’, ‘Close’, or ‘I understand’ button.
- ✅ Confirmation dialogs are used to prompt the user to confirm or cancel an action before proceeding. Typically users can choose between affirmative action (such as ‘Save changes’) and negative action (such as ‘Don’t save’).
- ☝️ Prompt dialogs are used to request user input by presenting a message and providing an input field or options to select.
- 💁♀️ Share dialogs allow users to share content or collaborate with others by inputting email addresses or selecting contacts.
In addition to the examples we’ve analyzed, other popular patterns exist. From simple, like a login dialog, a signup dialog, or save and save as dialogs, to more complex, like an export dialog for a spreadsheet or a print dialog with all the necessary settings.
A popover is a small overlay that appears close to a specific UI element, usually triggered by user interaction with it, such as hovering or clicking.
Popovers provide additional contextual information, options, or actions related to the UI element they are associated with.
Popovers are a type of popup. They are on the same level as dialogs and other groups like alerts, notifications, lightboxes, etc.
Popovers are typically non-modal. They usually don’t use backdrops since dimming the interactive content wouldn’t make sense. Popovers usually use the ‘light dismiss’ — The popover will disappear if a user hovers out of the element that triggered it or clicks out of the popover.
Examples of popovers:
- 👉 Popover menu — It presents a set of options in a compact form. It typically appears when the user interacts with a specific trigger element, such as a button or icon. It is designed to be unobtrusive and contextually relevant to the user’s interaction.
- 🎨 Color Picker — It offers users a visual interface to select colors for design or customization purposes. It can provide various mechanisms, such as sliders, color palettes, or input fields.
- 📆 Date picker — It allows users to select specific dates. They usually offer options to navigate through the calendar or input date and time values.
👉 Watch the video to understand the differences between Asana’s and Notion’s date pickers. See how Asana improved their UX significantly with one simple change 🚀
Tooltips are used to provide additional information about a specific element on the screen.
Tooltips are usually triggered by hovering over an element or tapping on it. They display contextual information, for example, to explain the purpose of a button.
Tooltips are in the popovers group.
They are non-modal, so they don’t disrupt the user’s flow. They don’t use a backdrop and generally disappear when you move the cursor away from the trigger, so it’s a ‘light dismiss’.
- A classic example of a tooltip is when you hover over a button, and after a short delay, a 👉 text explaining its functions appears.
- A slightly different example would be to 👉 provide more details on hover, like in the case of Asana’s ‘Share’ button, which gives an overview of what sharing settings are currently implemented so that users don’t have to open the sharing dialog.
Now that we’ve explained the differences between popups, dialogs, popovers, and tooltips, let’s take a look at how various design systems treat those elements and what naming conventions they use.
I need to warn you in advance that we will have some inconsistencies when it comes to naming, grouping, and logic.
🤖 Material design
In the components section, we can see some of the elements we’ve discussed today listed separately.
There is no one group that they would be a part of.
- 👉 Dialogs — Dialog is a modal (💡 no non-modal dialogs according to this DS) window that appears in front of app content to provide critical information or ask for a decision. There are two types of dialogs: basic and full-screen.
- In the ‘menus’ category, we see a 👉 popover menu that is displayed on top of the content after a user interacts with a trigger, a button, for example. They show a list of options to choose from.
- 📆 Date pickers are also listed as a separate component. They are defined because of their function, choosing the date, not their structure. Date pickers come as a popover on desktop or a modal dialog on mobile.
- 💁♀️ Tooltips — This design system differentiates between plain and rich tooltips. Plain tooltips display static information that describes the function of a UI element. Rich tooltips provide detailed context, like describing the value of a feature.
In conclusion, according to general classification, we would categorize rich tooltips as popovers.
Apple’s 🍎 Human Interface Guidelines
In HIG, components are organized according to their high-level function — layout and organization, menus and actions, navigation and search, etc.
Within those groups, there are various components that could be qualified as popups, dialogs, popovers, and tooltips.
- 👉 Popover menus — Context menus, dock menus, edit menus, and general menus. They all provide functionality related to a triggered item without blocking other UI elements.
- 👉 Popovers — ‘A popover is a transient view that appears above other content when people click or tap a control or interactive area.’ and that we should ‘use a popover to expose a small amount of information or functionality.’ So that aligns with our definition 🚀.
- 🎨 Color well (a popover color picker) — It’s included in the ‘selection and input’ section together with other components, like text fields, pickers, toggles, etc.
There is no strong differenciation of a ‘dialog’ element in Apple’s guidelines.
The assumption is that a Designer would select a correct layout from the ‘layouts and organization’ section and then include needed components from ‘selection and input’.
💡 In addition to components, we also can read the Modality page in the ‘patterns’ section. It talks about good practices of presenting content in a focused state.
Apple has a more high-level approach to how they document their design system.
It’s are not very prescriptive, which theoretically gives more freedom but also may make designing more confusing 😳 and difficult.
Polaris by Shopify 🚀
In this case, we see the ‘Overlays’ section that includes modal, popover, and tooltip elements.
The naming is slightly different from what we talked about earlier. Instead of calling them popups, they’ve decided to use the name ‘overlays’.
Overlays display contextual elements on top of the main admin interface that provide additional information or functionality.
- Modals require a user to take action before they continue. According to our naming, 👉 we would call them modal dialogs.
- ‘Popovers are small overlays that open on demand. They let merchants access additional content and actions without cluttering the page.’ — It aligns perfectly with the definition of a popover we discussed earlier ✅.
- ‘Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover, focus, tap, or click.’ — This aligns with our definition of a tooltip as well ✅.
💡 As you can see, teams who create design systems adjust naming conventions and structure to their individual needs.
It’s a common practice to list the modal dialogs, popovers, and tooltips as separate components…
…not necessarily putting that much emphasis on them being in the popups group.
The ease of use of a design system should be a priority.
It’s good to know the underlying structure and categorization, but at the end of the day, the success of a design system is measured by its impact on the team’s velocity and usability of the product 🚀.
It should, first of all, serve us as a team when it comes to velocity, speed of work, and usefulness.
Popups, dialogs, popovers and tooltips. I hope this article clarified the meaning of those terms, when to use which element, and how popups are treated within various design systems.
If you have any questions or comments about the content, please leave a comment or reach out to me at alicja@outdraw.design
☝️ Youtube channel where you can find the UX patterns series 🚀 Subscribe to not miss out!
