Popover – Tsunami

A popover opened by a button

The button names the popover's id in popovertarget. A click outside or Escape closes it, and opening another popover closes this one. The popover lines up with the start of the button, below it.

<button type="button" class="btn" popovertarget="pop-fees"><i class="icon icon-info" aria-hidden="true"></i>Fees</button>
<div class="popover" id="pop-fees" popover>
  <header>
    <h3>Card fees</h3>
    <p>Charged per transaction.</p>
  </header>
  <p><strong>2.9% + $0.30</strong></p>
</div>

Side: below, above, left and right of the button

data-side on the popover. When the popover does not fit, it flips to the opposite side.

<div class="stack" data-direction="row" data-gap="sm">
  <button type="button" class="btn" popovertarget="pop-side-bottom">Bottom</button>
  <div class="popover" id="pop-side-bottom" popover>
    <header><h3>Bottom</h3><p>Opens below the button. The default.</p></header>
  </div>
  <button type="button" class="btn" popovertarget="pop-side-top">Top</button>
  <div class="popover" id="pop-side-top" popover data-side="top">
    <header><h3>Top</h3><p>Opens above the button.</p></header>
  </div>
  <button type="button" class="btn" popovertarget="pop-side-left">Left</button>
  <div class="popover" id="pop-side-left" popover data-side="left">
    <header><h3>Left</h3><p>Opens to the left of the button.</p></header>
  </div>
  <button type="button" class="btn" popovertarget="pop-side-right">Right</button>
  <div class="popover" id="pop-side-right" popover data-side="right">
    <header><h3>Right</h3><p>Opens to the right of the button.</p></header>
  </div>
</div>

Alignment: start, center and end of the button

data-align: for a popover on the left or right, start is the top edge of the button and end its bottom edge.

<div class="stack" data-direction="row" data-gap="sm">
  <button type="button" class="btn" popovertarget="pop-align-start">Start</button>
  <div class="popover" id="pop-align-start" popover>
    <header><h3>Start</h3><p>Lines up with the start of the button. The default.</p></header>
  </div>
  <button type="button" class="btn" popovertarget="pop-align-center">Center</button>
  <div class="popover" id="pop-align-center" popover data-align="center">
    <header><h3>Center</h3><p>Centred on the button.</p></header>
  </div>
  <button type="button" class="btn" popovertarget="pop-align-end">End</button>
  <div class="popover" id="pop-align-end" popover data-align="end">
    <header><h3>End</h3><p>Lines up with the end of the button.</p></header>
  </div>
</div>

Side and alignment together

<div class="stack" data-direction="row" data-gap="sm">
  <button type="button" class="btn" popovertarget="pop-both-top-end">Top, end</button>
  <div class="popover" id="pop-both-top-end" popover data-side="top" data-align="end">
    <header><h3>Top, end</h3><p>Above the button, lined up with its end.</p></header>
  </div>
  <button type="button" class="btn" popovertarget="pop-both-right-center">Right, center</button>
  <div class="popover" id="pop-both-right-center" popover data-side="right" data-align="center">
    <header><h3>Right, center</h3><p>Right of the button, centred on it.</p></header>
  </div>
</div>

A header with a count: a badge after the title sits on the same row

In the popover's <header> the title and a badge share a row; a <p> after them takes its own line.

<button type="button" class="btn" popovertarget="pop-count">Products<i class="icon icon-chevron-down" aria-hidden="true"></i></button>
<div class="popover" id="pop-count" popover>
  <header>
    <h3>Products in cart</h3>
    <span class="badge">3</span>
  </header>
  <div class="item-group">
    <div class="item" data-size="sm"><figure><i class="icon icon-watch" aria-hidden="true"></i></figure><section><h3>Timeless Watch</h3></section><aside>$59.00</aside></div>
    <div class="item" data-size="sm"><figure><i class="icon icon-coffee" aria-hidden="true"></i></figure><section><h3>Ceramic Mug</h3></section><aside>$15.00</aside></div>
    <div class="item" data-size="sm"><figure><i class="icon icon-armchair" aria-hidden="true"></i></figure><section><h3>Wooden Stool</h3></section><aside>$39.00</aside></div>
  </div>
</div>

API

Methods (native)

Member	Type	Description
`showPopover()`	method	Opens the popover; any other open `auto` popover closes.
`hidePopover()`	method	Closes the popover.
`togglePopover(force?)`	method	Opens it when closed, closes it when open; `force` picks one. Returns the new state.
`:popover-open`	CSS	Matches while it is open: `el.matches(":popover-open")`.

Events (native)

Event	Detail	Description
`beforetoggle`	`oldState`, `newState` (`"open"` / `"closed"`)	Before it opens or closes; `preventDefault()` stops an opening.
`toggle`	`oldState`, `newState`	After it has opened or closed.

Keyboard

Key	Description
`Enter` / `Space`	On the button: opens or closes the popover.
`Tab`	From the button into the popover, which comes next in the focus order.
`Esc`	Closes the popover only; a dialog around it stays open.

No script. Without CSS anchor positioning the browser shows the popover in the middle of the window.

Attributes

Attribute / element	Values	Description
`class="popover"`	on the panel	The component: a bordered panel up to 20rem wide.
`popover`	none or `auto` (default), `manual`	`auto` closes on an outside click, Escape, or another popover; `manual` only by its button.
`id`	unique id	What the button's `popovertarget` names.
`popovertarget`	the popover's id	On the button; also makes it the anchor the popover is placed against.
`popovertargetaction`	`toggle` (default), `show`, `hide`	What a click on the button does.
`data-side`	none or `bottom` (default), `top`, `left`, `right`	Flips to the other side when it does not fit.
`data-align`	none or `start` (default), `center`, `end`	Start/end: left/right edge below or above; top/bottom edge on the left or right.
`> header`	`h3`, `.badge`, `p`	Title and count on one row, description below.
`autofocus`	on a control in the popover	Takes focus when the popover opens.