# Popover

> Floating panel anchored to a trigger.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/popover.json`

## Install

```tsx
import { Popover, PopoverTrigger, PopoverContent } from "@aspyn-io/kit";
```

### Inline settings panel

```tsx
<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Dimensions</Button>
  </PopoverTrigger>
  <PopoverContent>
    <div className="grid grid-cols-2 items-center gap-2">
      <Label htmlFor="width">Width</Label>
      <Input id="width" defaultValue="100%" className="h-8" />
      <Label htmlFor="height">Height</Label>
      <Input id="height" defaultValue="25px" className="h-8" />
    </div>
  </PopoverContent>
</Popover>
```

### Alignment

```tsx
<PopoverContent align="start" side="bottom" sideOffset={8}>…</PopoverContent>
```

## Notes

- Popover is for interactive content; Tooltip is for short, read-only hints.