# Popover · MIAN

Rich, non-modal content anchored to a trigger, on the native Popover API.

- Id: `popover` · Category: Overlays · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/popover
- Use for: popover, floating panel, date picker popup, info bubble.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-popover + popover`: The panel. Point popovertarget at it.
- `data-placement`: bottom (default), top, left, right, with -start or -end.
- `mn-popover-title`: Heading.

## Accessibility

- The browser handles Escape, light dismiss and aria-expanded on the invoker. Use a Modal instead if the content must be completed.

## Examples

### Dimensions

```html
<button class="mn-btn mn-btn-outline" popovertarget="pop-dim">Dimensions</button>
<div class="mn-popover" popover id="pop-dim" data-placement="bottom">
  <p class="mn-popover-title">Dimensions</p>
  <p class="mn-muted" style="margin:0 0 .75rem">Set the layer size.</p>
  <div class="mn-form-row" style="grid-template-columns:1fr 1fr">
    <div class="mn-field"><label class="mn-label" for="pw">Width</label><input class="mn-input mn-input-sm" id="pw" value="100%"></div>
    <div class="mn-field"><label class="mn-label" for="ph">Height</label><input class="mn-input mn-input-sm" id="ph" value="25px"></div>
  </div>
</div>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/popover/source