Popover

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, but it opens on press, stays open while the user reads or acts, and can hold buttons.

Storage details

<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 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 info

<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

<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.

Tokens

Override these on the .popover.