Classifying overlays
What is an overlay
Overlays are components that appear temporarily on top of the screen permanent elements. They can be modal (that block the contents behind them) or non-modal. At TheFork, we use only four types of overlays: pop-in windows, popovers and tooltips.
Pop-in windows
Pop-in windows may contain any component and are not attached to any component. These windows always appear on-demand and must be dismissible by the user. Pop-ins must contain a single main action. As these can be very complex, we decided to create a specific article on pop-ins (planned)
Examples
TBD
Rules of engagements
- To reduce discrepancies, we use specific pop-in sizes: small, medium, large and full-screen.
- Full-screen pop-ins hide the entire page, but they behave as pop-ins and not as full pages.
- Pop-ins are “forks” attached to a main user flow and they must be optional in that flow.
Popovers
Popovers are the in-between components between Tooltips and Pop-in windows. Just as pop-in windows, they may contain any other component. However, they differ from pop-ins in the sense that they are attached to an on-screen component.
Examples
TBD
Rules of engagement
- At TheFork we use templates to reuse the most common popovers, such as date pickers or the notifications panel.
- We use popovers to add tour points when needed. Tour points are popovers that appear automatically when the page loads, either all at once or on a sequential order.
- All popovers must have a specific exit action such as close or a specific CTA button
- As pop-in windows, they can be both modal or non-modal.
Tooltips
Tooltips are text-only overlays that appear on-demand, when the user executes an action, either by hovering or clicking on a component. On-hover tooltips are unusable on touch devices and therefore replaced by on-click tooltips.
Rules of engagement
- Only use tooltips on interactive components such as links or icons.
- Ideally, use tooltips for texts no longer than 150 characters, including spaces.
- Tooltips should never contain critical information needed to complete the user’s action.
- They are never modal.
