# popover — Examples

## click trigger

```html
<popover-ui trigger="click">
  <button-ui slot="trigger" text="Click me" variant="outline"></button-ui>
  <div slot="content" style="padding:var(--a-space-3);">
    <p>This popover opens on click and closes on click outside or Escape.</p>
  </div>
</popover-ui>
```

## hover trigger

```html
<popover-ui trigger="hover">
  <button-ui slot="trigger" text="Hover me" variant="outline"></button-ui>
  <div slot="content" style="padding:var(--a-space-3);">
    <p>This popover opens on hover and stays open while the pointer is over it.</p>
  </div>
</popover-ui>
```

## placement

```html
<popover-ui placement="bottom">
  <button-ui slot="trigger" text="Bottom" variant="outline" size="sm"></button-ui>
  <div slot="content" style="padding:var(--a-space-3);">
    <p>Placed below the trigger.</p>
  </div>
</popover-ui>
```
