Overlays

Quick Decision Rules

• Use Tooltip for short non-interactive hints.
• Use Popover for brief anchored non-modal content.
• Use Dialog for focused modal tasks.
• Use Drawer for side-panel workflows that preserve page context.
• Use Sheet for touch-friendly or bottom-sheet panel behavior.

By Interaction Strength

• Hint only: Tooltip
• Lightweight contextual content: Popover
• Strong modal interruption: Dialog
• Context-preserving side workflow: Drawer
• Mobile-first sliding panel: Sheet

Common Misclassifications

• Do not use Popover for modal or destructive workflows.
• Do not use Dialog when the content really behaves like a side panel or bottom sheet.
• Do not use Tooltip for interactive content.
• Do not use Drawer when the task should feel centered and bounded.
• Do not use Sheet if snap points or sliding panel behavior are not part of the UX.

Start Here

• Quick contextual actions: Popover
• Confirmations and focused forms: Dialog
• Filters, inspectors, member panels: Drawer
• Checkout or mobile action panels: Sheet
• Supplemental hints: Tooltip