# Popover
{"Open popover"} {"Dimensions"} {"Set the dimensions for the layer."}
```astro
---
---
Open popover
Dimensions
Set the dimensions for the layer.
```
## Installation
```bash
bunx bejamas add popover
```
```bash
npx bejamas add popover
```
```bash
pnpm dlx bejamas add popover
```
```bash
yarn dlx bejamas add popover
```
## Usage
```astro nocollapse
---
---
Open
Title
Description text.
Popover body content.
```
## Props
| Prop | Type | Default |
|---|---|---|
| class | `string` | `""` |
## Examples
### Basic
{"Open popover"} {"Popover Title"} {"This is a simple popover."}
```astro
---
---
Open popover
Popover Title
This is a simple popover.
```
### Side Variants
Left Popover on the left
Top Popover on top
Bottom Popover on bottom
Right Popover on the right
```astro
---
---
Left
Popover on the left
Top
Popover on top
Bottom
Popover on bottom
Right
Popover on the right
```
### Alignment Variants
Start Start-aligned content
Center Center-aligned content
End End-aligned content
```astro
---
---
Start
Start-aligned content
Center
Center-aligned content
End
End-aligned content
```
### With Form
{"Open form"} {"Dimensions"} {"Set the dimensions for the layer."}
```astro
---
---
Open form
Dimensions
Set the dimensions for the layer.
```
## API Reference
### Events
The popover emits custom events that you can listen to:
| Event | Detail | Description |
|-------|--------|-------------|
| `popover:change` | `{ open: boolean }` | Fired when the popover opens or closes |
```astro nocollapse console
Open
Content
```
### Programmatic Control
You can control the popover programmatically by dispatching a `popover:set` event:
```js nocollapse
const popover = document.getElementById('my-popover');
// Open the popover
popover.dispatchEvent(new CustomEvent('popover:set', {
detail: { open: true }
}));
// Close the popover
popover.dispatchEvent(new CustomEvent('popover:set', {
detail: { open: false }
}));
```
### Data Attributes
The popover sets these data attributes that you can use for styling or querying state:
| Attribute | Element | Description |
|-----------|---------|-------------|
| `data-state` | popover, popover-content | Current state (`open` or `closed`) |
| `data-side` | popover, popover-content | Position relative to trigger (`top`, `bottom`, `left`, `right`) |
| `data-align` | popover, popover-content | Alignment (`start`, `center`, or `end`) |