Popover

A floating panel that appears on trigger click, useful for displaying rich content like forms or additional information.

1
---
2
import { Input } from '@bejamas/ui/components/input';
3
import { Label } from '@bejamas/ui/components/label';
4
import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '@bejamas/ui/components/popover';
5
---
6

7
<Popover>
8
  <PopoverTrigger variant="outline">Open popover</PopoverTrigger>
9
  <PopoverContent>
10
    <PopoverHeader>
11
      <PopoverTitle>Dimensions</PopoverTitle>
12
      <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
13
    </PopoverHeader>
14
    <div class="grid gap-2">
15
      <div class="grid grid-cols-3 items-center gap-4">
16
        <Label>Width</Label>
17
        <Input class="col-span-2 h-8" value="100%" />
18
      </div>
19
      <div class="grid grid-cols-3 items-center gap-4">
20
        <Label>Height</Label>
21
        <Input class="col-span-2 h-8" value="25px" />
22
      </div>
23
    </div>
24
  </PopoverContent>
25
</Popover>

Installation

bunx bejamas add popover

npx bejamas add popover

pnpm dlx bejamas add popover

yarn dlx bejamas add popover

Usage

1
---
2
import { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription } from '@bejamas/ui/components/popover';
3
---
4

5
<Popover>
6
  <PopoverTrigger variant="outline">Open</PopoverTrigger>
7
  <PopoverContent>
8
    <PopoverHeader>
9
      <PopoverTitle>Title</PopoverTitle>
10
      <PopoverDescription>Description text.</PopoverDescription>
11
    </PopoverHeader>
12
    <p>Popover body content.</p>
13
  </PopoverContent>
14
</Popover>

Examples

Basic

1
---
2
import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '@bejamas/ui/components/popover';
3
---
4

5
<Popover>
6
  <PopoverTrigger variant="outline">Open popover</PopoverTrigger>
7
  <PopoverContent>
8
    <PopoverHeader>
9
      <PopoverTitle>Popover Title</PopoverTitle>
10
      <PopoverDescription>This is a simple popover.</PopoverDescription>
11
    </PopoverHeader>
12
  </PopoverContent>
13
</Popover>

Side Variants

1
---
2
import { Popover, PopoverContent, PopoverTrigger } from '@bejamas/ui/components/popover';
3
---
4

5
<div class="flex gap-4 items-center justify-center py-8">
6
  <Popover>
7
    <PopoverTrigger variant="outline">Left</PopoverTrigger>
8
    <PopoverContent side="left">
9
      <p>Popover on the left</p>
10
    </PopoverContent>
11
  </Popover>
12
  <Popover>
13
    <PopoverTrigger variant="outline">Top</PopoverTrigger>
14
    <PopoverContent side="top">
15
      <p>Popover on top</p>
16
    </PopoverContent>
17
  </Popover>
18
  <Popover>
19
    <PopoverTrigger variant="outline">Bottom</PopoverTrigger>
20
    <PopoverContent side="bottom">
21
      <p>Popover on bottom</p>
22
    </PopoverContent>
23
  </Popover>
24
  <Popover>
25
    <PopoverTrigger variant="outline">Right</PopoverTrigger>
26
    <PopoverContent side="right">
27
      <p>Popover on the right</p>
28
    </PopoverContent>
29
  </Popover>
30
</div>

Alignment Variants

1
---
2
import { Popover, PopoverContent, PopoverTrigger } from '@bejamas/ui/components/popover';
3
---
4

5
<div class="flex gap-8">
6
  <Popover>
7
    <PopoverTrigger variant="outline">Start</PopoverTrigger>
8
    <PopoverContent side="bottom" align="start">
9
      <p>Start-aligned content</p>
10
    </PopoverContent>
11
  </Popover>
12
  <Popover>
13
    <PopoverTrigger variant="outline">Center</PopoverTrigger>
14
    <PopoverContent side="bottom" align="center">
15
      <p>Center-aligned content</p>
16
    </PopoverContent>
17
  </Popover>
18
  <Popover>
19
    <PopoverTrigger variant="outline">End</PopoverTrigger>
20
    <PopoverContent side="bottom" align="end">
21
      <p>End-aligned content</p>
22
    </PopoverContent>
23
  </Popover>
24
</div>

With Form

1
---
2
import { Input } from '@bejamas/ui/components/input';
3
import { Label } from '@bejamas/ui/components/label';
4
import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '@bejamas/ui/components/popover';
5
---
6

7
<Popover>
8
  <PopoverTrigger variant="outline">Open form</PopoverTrigger>
9
  <PopoverContent>
10
    <PopoverHeader>
11
      <PopoverTitle>Dimensions</PopoverTitle>
12
      <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
13
    </PopoverHeader>
14
    <div class="grid gap-2">
15
      <div class="grid grid-cols-3 items-center gap-4">
16
        <Label>Width</Label>
17
        <Input class="col-span-2 h-8" value="100%" />
18
      </div>
19
      <div class="grid grid-cols-3 items-center gap-4">
20
        <Label>Height</Label>
21
        <Input class="col-span-2 h-8" value="25px" />
22
      </div>
23
    </div>
24
  </PopoverContent>
25
</Popover>

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

Waiting for logs…

1
<Popover id="my-popover">
2
  <PopoverTrigger variant="outline">Open</PopoverTrigger>
3
  <PopoverContent>
4
    <p>Content</p>
5
  </PopoverContent>
6
</Popover>
7

8
<script>
9
  const popover = document.getElementById('my-popover');
10

11
  popover.addEventListener('popover:change', (e) => {
12
    console.log('Is open:', e.detail.open);
13
  });
14
</script>

Programmatic Control

You can control the popover programmatically by dispatching a popover:set event:

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`)