Popover

Popover shows rich, non-modal content in a panel anchored to the button that opens it. A native popover gives the top layer and light dismiss, and CSS anchor positioning places it. It needs no script.

Public web API

A root wrapper, a Button trigger with commandfor and command="toggle-popover", and a popover panel with any content.

<div data-bitsy-popover data-bitsy-placement="end">
  <button data-bitsy-button data-bitsy-popover-trigger type="button"
          commandfor="share-panel" command="toggle-popover">Share</button>
  <div data-bitsy-popover-panel popover id="share-panel" role="dialog" aria-labelledby="share-title">
    <h2 data-bitsy-popover-title id="share-title">Share project</h2>
    <button data-bitsy-popover-close type="button" commandfor="share-panel" command="hide-popover" aria-label="Close">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" /></svg>
    </button>
    <div data-bitsy-text-field>
      <label for="share-email">Invite by email</label>
      <input id="share-email" type="email">
    </div>
  </div>
</div>

A titled panel uses role="dialog" and aria-labelledby. An untitled panel needs no role.
The close button needs an aria-label.
data-bitsy-placement="end" aligns the panel to the trigger's end. data-bitsy-size="sm" narrows it.
Do not use it for a list of actions. That is Menu.

Try it

Press Enter or Space on a trigger, then Tab into the panel. Escape or an outside click closes it and focus returns to the trigger.

Projects archive after 90 days without activity.

Read about archiving

Aligned to the trigger's end so it stays on screen.

Native behavior

The browser provides the top layer, light dismiss, Escape, focus return, and the trigger's expanded state. There is no z-index and no script.
Placement uses CSS anchor positioning against the trigger and flips when there is no room. Where unsupported, the browser's centered placement remains and the panel still works.
Motion is a short fade, removed under prefers-reduced-motion: reduce.

Foundation versus Bit

The foundation does not style [popover]. data-bitsy-popover adds the surface, placement, title, close button, and motion. The trigger is a normal Button.