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 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)
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 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.
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 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.