Modal and Overlay Patterns Overlays appear above the main content layer. They range from lightweight popovers (non-blocking, anchored to a trigger) to full blocking modals (require a user response before the app continues). Choosing the right overlay type for the task prevents unnecessary interruption and keeps the user oriented. --- The Overlay Hierarchy Choose the lightest type that satisfies the task. Heavier overlays carry higher cognitive cost. | Type | Blocks background | Anchored to trigger | Typical content | Dismiss with | |---|---|---|---|---| | Tooltip | No | Yes | 1–2 lines of exp…