# Popover

> A panel anchored to a trigger, for content you work in: a calendar, a filter, a list of notifications. A Tooltip only shows text and a Dropdown is a menu of actions. It stands on the same surface as the rest of the overlay family. Focus moves in on open and back to the trigger on Esc.

Section: Primitives. Docs: https://entrepta.vercel.app/docs/components/popover

## Install

```bash
npx @entrepta/cli@latest add popover
```

Files: `primitives/popover.tsx`, `lib/overlay.ts`.
npm packages: `@radix-ui/react-popover`.
Comes with: `overlay-lib`.

## Usage

```tsx
import { Popover, PopoverContent, PopoverTrigger } from "@/components/entrepta/popover"

<Popover>
  <PopoverTrigger asChild>
    <Button variant="secondary">filters</Button>
  </PopoverTrigger>
  {/* a dialog to screen readers: name it when it has no heading */}
  <PopoverContent aria-label="Filters" className="w-72">
    …
  </PopoverContent>
</Popover>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open / onOpenChange` | `boolean / (open: boolean) => void` | - | Controlled state. Leave both out and it manages itself |
| `side` | `"top" \| "right" \| "bottom" \| "left"` | "bottom" | Where it opens. It flips when there is no room (PopoverContent) |
| `align` | `"start" \| "center" \| "end"` | "start" | Alignment against the trigger (PopoverContent) |
| `modal` | `boolean` | false | Traps focus and blocks the page behind it |