Popover

The popover object documents the native HTML element and attribute based API for popovers. The examples below use normal elements and attributes such as popovertarget, popovertargetaction, popover, and the styleguide placement attributes.

Basic native popover

A normal button that toggles a popover element by id.

Click on the trigger to show the popover.

Supported trigger actions

Buttons can explicitly show, hide, or toggle the same popover using `popovertargetaction`.

This example shows the supported native trigger actions for popovers.

<button popovertarget="popover-actions" popovertargetaction="show">Open</button> <button popovertarget="popover-actions" popovertargetaction="hide">Close</button> <button popovertarget=
"popover-actions" popovertargetaction="toggle">Toggle</button>
<div id="popover-actions" popover="">
  <p>
    This popover is controlled by native attributes.
  </p>
</div>

Popover with backdrop

Adds a backdrop behind the popover content.

This example shows a popover with a backdrop behind it.

<button popovertarget="popover-backdrop">Open backdrop popover</button>
<div id="popover-backdrop" popover="" data-popover-backdrop="">
  <p>
    This popover has a backdrop.
  </p>
</div>

Full-page cover

Lets the popover fill the whole viewport when `data-js-popover-cover` is set.

Click on the trigger to show a popover that covers the full viewport.

<button popovertarget="popover-cover">Open cover popover</button>
<div id="popover-cover" popover="" data-js-popover-cover="">
  <div style="min-height: 100%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.5);">
    <div style="background: white; padding: 1rem;">
      This popover covers the whole page.
    </div>
  </div>
</div>

Relative placement

Positions the popover relative to its trigger instead of the viewport.

This example positions the popover relative to the trigger.

<button popovertarget="popover-relative">Open relative popover</button>
<div id="popover-relative" popover="" data-js-popover-relative="true" data-js-popover-horizontal-placement="right" data-js-popover-vertical-placement="bottom">
  <p>
    This popover is placed relative to the trigger.
  </p>
</div>

Relative placement with a separate anchor

Positions the popover relative to another element, using `data-js-popover-relative` on the anchor element.

This example positions the popover relative to a separate anchor element.

Anchor element

<button popovertarget="popover-relative-anchor">Open anchored popover</button>
<div data-js-popover-relative="popover-relative-anchor" class="u-display--inline-flex">
  <span>Anchor element</span>
</div>
<div id="popover-relative-anchor" popover="" data-js-popover-relative="true" data-js-popover-horizontal-placement="right" data-js-popover-vertical-placement="bottom">
  <p>
    This popover is placed relative to the anchor element instead of the trigger.
  </p>
</div>

Viewport placement

Uses the placement attributes relative to the viewport when `data-js-popover-relative` is not set on the popover.

This example uses viewport-based placement.

<button popovertarget="popover-viewport">Open viewport popover</button>
<div id="popover-viewport" popover="" data-js-popover-horizontal-placement="center" data-js-popover-vertical-placement="top">
  <p>
    This popover is placed relative to the viewport.
  </p>
</div>

Key	Default value	Type	Available values	Description
popovertarget	Connects a trigger button to a popover by id.	string	Any element with a matching id can be used as a popover target	-
popovertargetaction	Controls whether the trigger toggles, shows, or hides the popover.	string	-	-
popover	Marks the element as a popover.	string	-	-
data-js-popover-cover	Optional. Makes the popover cover the full viewport and skips the regular placement logic.	string	-	-
data-js-popover-relative	Optional. Add it to the popover to position the popover relative to the trigger, or set it on another element with the popover id as the value to use that element as the relative anchor instead.	string	-	-
data-js-popover-horizontal-placement	Optional. Sets horizontal placement to `left`, `center`, or `right`.	string	-	-
data-js-popover-vertical-placement	Optional. Sets vertical placement to `top`, `center`, or `bottom`.	string	-	-
data-popover-backdrop	Optional. Adds a backdrop behind the popover.	string	-	-
id		string	-	The DOM id of the component.
classList	[]	array	-	Array containing wrapping classes array
attributeList	[]	array	-	Array containing keys and values rendered as attributes