# Popover

Source: https://iriscss.com/documentation/elements/popover/

Any element with the `popover` attribute, opened by a button with `popovertarget`. No JavaScript.

The popover fades in over the page, centered by default. Clicking outside or pressing `Esc` closes it.

```html
<button popovertarget="popover-basic">Open popover</button>
<div id="popover-basic" popover>
  <h4>Popover</h4>
  <p>Click outside or press Esc to close.</p>
</div>
```

## Placement

`data-placement` anchors the popover to its button: `bottom`, `top`, `left` or `right`. It flips to the other side when there is no room. Browsers without anchor positioning keep it centered.

```html
<button popovertarget="popover-bottom">Bottom</button>
<div id="popover-bottom" popover data-placement="bottom">Below the button</div>
<button popovertarget="popover-top">Top</button>
<div id="popover-top" popover data-placement="top">Above the button</div>
<button popovertarget="popover-left">Left</button>
<div id="popover-left" popover data-placement="left">Before the button</div>
<button popovertarget="popover-right">Right</button>
<div id="popover-right" popover data-placement="right">After the button</div>
```

## Older browsers

Browsers without the Popover API show the content in place, as normal page content.

## Related

The [navbar](https://iriscss.com/documentation/components/navbar/index.html.md) menu and the [toast](https://iriscss.com/documentation/components/toast/index.html.md) are popovers too. For a short label on hover, use a [tooltip](https://iriscss.com/documentation/components/tooltip/index.html.md).

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-popover-max-width` | `20rem` |  |
| `--i-popover-offset` | `calc(var(--i-spacing) * 0.25)` | Gap between an anchored popover and the button that opens it |
| `--i-popover-duration` | `var(--i-duration)` |  |
| `--i-popover-color-background` | `var(--i-dropdown-color-background)` |  |
| `--i-popover-color-border` | `var(--i-dropdown-color-border)` |  |
| `--i-popover-shadow` | `var(--i-dropdown-shadow)` |  |
| `--i-popover-color-text` | `var(--i-dropdown-color-text)` |  |