# Overlays

Use this page when content opens above the current page and the main choice is about interruption level, anchor behavior, and panel shape.

## Quick Decision Rules

- Use [Tooltip](https://vega-ui.dev/components/tooltip/) for short non-interactive hints.
- Use [Popover](https://vega-ui.dev/components/popover/) for brief anchored non-modal content.
- Use [Dialog](https://vega-ui.dev/components/dialog/) for focused modal tasks.
- Use [Drawer](https://vega-ui.dev/components/drawer/) for side-panel workflows that preserve page context.
- Use [Sheet](https://vega-ui.dev/components/sheet/) for touch-friendly or bottom-sheet panel behavior.

## By Interaction Strength

- Hint only: [Tooltip](https://vega-ui.dev/components/tooltip/)
- Lightweight contextual content: [Popover](https://vega-ui.dev/components/popover/)
- Strong modal interruption: [Dialog](https://vega-ui.dev/components/dialog/)
- Context-preserving side workflow: [Drawer](https://vega-ui.dev/components/drawer/)
- Mobile-first sliding panel: [Sheet](https://vega-ui.dev/components/sheet/)

## Common Misclassifications

- Do not use [Popover](https://vega-ui.dev/components/popover/) for modal or destructive workflows.
- Do not use [Dialog](https://vega-ui.dev/components/dialog/) when the content really behaves like a side panel or bottom sheet.
- Do not use [Tooltip](https://vega-ui.dev/components/tooltip/) for interactive content.
- Do not use [Drawer](https://vega-ui.dev/components/drawer/) when the task should feel centered and bounded.
- Do not use [Sheet](https://vega-ui.dev/components/sheet/) if snap points or sliding panel behavior are not part of the UX.

## Start Here

- Quick contextual actions: [Popover](https://vega-ui.dev/components/popover/)
- Confirmations and focused forms: [Dialog](https://vega-ui.dev/components/dialog/)
- Filters, inspectors, member panels: [Drawer](https://vega-ui.dev/components/drawer/)
- Checkout or mobile action panels: [Sheet](https://vega-ui.dev/components/sheet/)
- Supplemental hints: [Tooltip](https://vega-ui.dev/components/tooltip/)