Popover · Layout UI

Basic

A named nonmodal panel, anchored to its trigger. Tab remains native; Escape and Close return focus.

View Code

<div>
  <button
    class="btn secondary"
    type="button"
    data-popover
    popovertarget="project-popover"
    aria-haspopup="dialog"
    aria-controls="project-popover"
  >
    Project Details
  </button>
  <div
    class="popover popup-panel"
    id="project-popover"
    popover="auto"
    role="dialog"
    aria-labelledby="project-popover-title"
  >
    <div class="popover-content">
      <h3 class="popover-view-heading" id="project-popover-title">
        Website refresh
      </h3>
      <p class="muted">
        A focused panel for supporting information. The rest of the page stays available.
      </p>
      <button class="btn secondary" type="button" data-popover-close>
        Close
      </button>
    </div>
  </div>
</div>

Form controls

Native fields retain their own labels, selection and keyboard behavior. The demo does not save changes.

View Code

<div>
  <button class="btn secondary" type="button" data-popover popovertarget="name-popover">
    Edit Display Name
  </button>
  <div
    class="popover popup-panel"
    id="name-popover"
    popover="auto"
    role="dialog"
    aria-labelledby="name-popover-title"
  >
    <div class="popover-content">
      <h3 class="popover-view-heading" id="name-popover-title">
        Display name
      </h3>
      <div class="field">
        <label for="popover-name">
          Name
        </label>
        <input
          class="input"
          id="popover-name"
          name="display-name"
          value="Alex Morgan"
          autocomplete="nickname"
          autofocus
        >
      </div>
      <p class="muted">
        This example changes only the local field. Your application owns saving.
      </p>
      <button class="btn secondary" type="button" data-popover-close>
        Close
      </button>
    </div>
  </div>
</div>

Connected views

Move forward to supporting content and back without closing. Directional motion follows Navigation timing and respects reduced motion.

View Code

<div>
  <button
    class="btn secondary"
    type="button"
    data-popover
    popovertarget="preferences-popover"
    data-popover-side="top"
  >
    Preferences
  </button>
  <div
    class="popover popup-panel"
    id="preferences-popover"
    popover="auto"
    role="dialog"
    aria-label="Preferences"
  >
    <div data-popover-view="main">
      <p class="popover-row-label">
        Preferences
      </p>
      <button class="popup-row popup-action" type="button" data-popover-to="help">
        About These Preferences
      </button>
      <button class="popup-row popup-action" type="button" data-popover-close>
        Close
      </button>
    </div>
    <section data-popover-view="help" hidden aria-label="About these preferences">
      <button
        class="popup-row popup-action popup-action-heading"
        type="button"
        data-popover-back
        aria-label="About These Preferences, back to Preferences"
      >
        <span class="icon" aria-hidden="true" data-icon="chevron-left">
        </span>
        About These Preferences
      </button>
      <div class="popover-content">
        <p>
          Views move forward and back using the shared motion tokens. Escape returns to the previous view, then closes the panel.
        </p>
      </div>
    </section>
  </div>
</div>

Right-to-left

A Hebrew example with logical alignment and reversed forward/back view motion.

View Code

<div dir="rtl" lang="he">
  <button
    class="btn secondary"
    type="button"
    data-popover
    popovertarget="rtl-popover"
    data-popover-align="end"
  >
    פרטי הפרויקט
  </button>
  <div
    class="popover popup-panel"
    id="rtl-popover"
    popover="auto"
    role="dialog"
    aria-labelledby="rtl-popover-title"
  >
    <div data-popover-view="main" class="popover-content">
      <h3 class="popover-view-heading" id="rtl-popover-title">
        פרטי הפרויקט
      </h3>
      <p>
        יישור הפאנל וכיוון המעבר מתאימים לכיוון הקריאה.
      </p>
      <button class="popup-row popup-action" type="button" data-popover-to="help">
        מידע נוסף
      </button>
      <button class="btn secondary" type="button" data-popover-close>
        סגירה
      </button>
    </div>
    <section data-popover-view="help" hidden aria-label="מידע נוסף">
      <button
        class="popup-row popup-action popup-action-heading"
        type="button"
        data-popover-back
      >
        <span class="icon" aria-hidden="true" data-icon="chevron-left">
        </span>
        חזרה
      </button>
      <div class="popover-content">
        <p>
          אפשר לחזור לתצוגה הקודמת בלי לסגור את הפאנל.
        </p>
      </div>
    </section>
  </div>
</div>