Overlays

Popover

A small panel next to a button, for extra detail or a few controls. The page stays usable.

Basic

HTML

<button class="pw-btn" data-pw-popover="#demo-pop">Shipping details</button>

<div class="pw-popover" id="demo-pop" hidden>
  <h3>Shipping</h3>
  <p>Orders placed before 2 pm leave the same day. Delivery takes 2 to 4 working days.</p>
</div>

With controls

The focus moves into the panel. Tab past the last control and it closes.

HTML

<button class="pw-btn" data-pw-popover="#demo-pop-form" data-place="bottom-start">Rename</button>

<div class="pw-popover" id="demo-pop-form" aria-label="Rename the file" hidden>
  <label class="pw-field">
    <span class="pw-label">File name</span>
    <input class="pw-input" value="report-final.pdf">
  </label>
  <p style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px">
    <button class="pw-btn pw-btn--sm" data-pw-close>Cancel</button>
    <button class="pw-btn pw-btn--sm pw-btn--primary" data-pw-close>Save</button>
  </p>
</div>

Sides

HTML

<button class="pw-btn" data-pw-popover="#demo-pop-top" data-place="top">Top</button>
<button class="pw-btn" data-pw-popover="#demo-pop-right" data-place="right">Right</button>
<button class="pw-btn" data-pw-popover="#demo-pop-left" data-place="left">Left</button>

<div class="pw-popover" id="demo-pop-top" hidden><p>Above the button.</p></div>
<div class="pw-popover" id="demo-pop-right" hidden><p>To the right of the button.</p></div>
<div class="pw-popover" id="demo-pop-left" hidden><p>To the left of the button.</p></div>

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-pw-popover`		On the button: the selector of the panel.
`data-place`	`bottom`	On the button: `top`, `bottom`, `left` or `right`, plus `-start` or `-end`.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:open`	On the panel, before it opens. Can be stopped.
`pw:close`	On the panel, with `reason`.

From your script

var p = Partwise.get(buttonElement, 'popover');
p.open(); p.close(); p.toggle(); p.isOpen;

Keyboard

Key	Action
`Enter` `Space`	On the button: open or close
`Esc`	Close and go back to the button
`Tab`	Move through the panel. Leaving it closes it.

Good to know

Give the panel an aria-label when it has no heading. Without one, the button text is used.
A data-pw-close button inside closes the panel.
It moves to the other side when there is no room, and follows its button when the page scrolls.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/14-tooltip-popover.css, js/14-tooltip-popover.js.