# Popover

Render a lightweight anchored overlay. Like a tooltip that went to the gym and got buff.

## Notes

- Use Popover for small supporting content blocks. Don't put an entire form inside a popover.
- Add a title when content needs a visible label and dismiss button.
- Only disable outside-click dismissal when another obvious close path exists.

## Properties

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| id | `string` | - | Unique ID for the popover. |
| open | `boolean` | false | Whether the popover is open. |
| position | `'top' | 'bottom' | 'left' | 'right'` | 'bottom' | Position relative to trigger. |
| title | `string` | - | Optional title. |
| closeOnOutsideClick | `boolean` | true | Close on outside click. |
| class | `string` | - | Additional CSS classes. |

## Example

```astro
<Popover
  open
  position="right"
  title="Details"
>
  <p>Popover content stays short and contextual.</p>
</Popover>
```