# Popover

> A panel that opens from a button and stays until dismissed, on the native popover attribute.

## Anatomy

A `.popover` is a native `[popover]` panel. The button that opens it names it with `popovertarget`, and the panel opens against that button.

The browser handles the behavior without JavaScript. Pressing the button toggles the panel, and Escape or a click outside closes it. Focus returns to the button, and the button reports the panel as expanded. CSS anchor positioning places the panel and flips it when it would not fit. It looks like a [rich tooltip](/tooltips.html.md), but it opens on press, stays open while the user reads or acts, and can hold buttons.

Storage details

### Storage

Files in the trash count toward your quota until you empty it.

Empty trash Close

```
<button type="button" class="tonal" popovertarget="storage">Storage details</button>
<div id="storage" class="popover" popover>
  <h3>Storage</h3>
  <p>Files in the trash count toward your quota until you empty it.</p>
  <div class="popover-actions">
    <button type="button" class="text">Empty trash</button>
    <button type="button" class="text" popovertarget="storage" popovertargetaction="hide">Close</button>
  </div>
</div>
```

## Toggletip

Put a short popover behind an info [icon button](/icon-buttons.html.md) to make a toggletip. A toggletip is a note the user asks for, and it stays until they dismiss it. Name the button for what it explains.

Two-step verification

After your password, we ask for a code from your phone.

```
<button type="button" class="icon-button" popovertarget="tip-2sv"
        aria-label="About two-step verification">
  <span class="material-symbols" aria-hidden="true">info</span>
</button>
<div id="tip-2sv" class="popover" popover>
  <p>After your password, we ask for a code from your phone.</p>
</div>
```

## Placement

By default the panel opens below the button with their start edges aligned. Add `top` to open above, or `start` or `end` to open beside the button, centered on it. In every case the panel flips to the other side when it would leave the viewport. A browser without CSS anchor positioning centers the panel in the viewport instead.

Top Start End

Above the button.

Before the button.

After the button.

```
<div id="above" class="popover top" popover>…</div>
<div id="before" class="popover start" popover>…</div>
<div id="after" class="popover end" popover>…</div>
```

## Accessibility

The panel follows its button in the reading order, so a screen reader reaches it next. The browser does not move focus into it. Keep it short and leave the role off. Put a form, or anything the user has to finish, in a [dialog](/dialogs.html.md).

## Tokens

Override these on the `.popover`.

| Token | Default |
| --- | --- |
| `--md-comp-popover-container-color` | `--md-sys-color-surface-container` |
| `--md-comp-popover-shape` | 12px |
| `--md-comp-popover-padding` | 12px 16px |
| `--md-comp-popover-max-width` | 320px |
| `--md-comp-popover-gap` | 4px |