Popover Component

The Popover component creates contextual overlays that appear next to a trigger element. It features smart positioning, smooth animations, and comprehensive accessibility support.

Key Features

• Smart Positioning: Automatically adjusts to stay within viewport

• Multiple Alignments: Start, center, or end alignment options

• Keyboard Support: Full keyboard navigation and accessibility

• Click Outside: Automatic closing when clicking outside

Basic Usage

Create a simple popover with default settings:

1
<Popover>
2
    <p>Open Popover</p>
3
    <p>This is the popover content.</p>
4
</Popover>

Position Variants

Position Options

1
<Popover position="above">
2
  <p slot="trigger">Above</p>
3
  <div class="w-max modal p-4">
4
    <p>Appears above the trigger</p>
5
  </div>
6
</Popover>

Alignment Options

1
<Popover position="below" alignment="center">
2
  <p slot="trigger">Center</p>
3
  <div class="w-max modal p-4">
4
    <p>Center aligned content</p>
5
  </div>
6
</Popover>

Popover Component Props API

Popover Functions API

The Popover component exposes methods for programmatic control:

1
// Get popover instance
2
const popover = document.querySelector('popover-wrapper');
3

4
// Show popover
5
popover.toggle(true);
6

7
// Hide popover
8
popover.toggle(false);
9

10
// Toggle popover
11
popover.toggle();

Use Cases