Free pack

Popover `<mv-popover>`

Nicht-modales schwebendes Panel im Top Layer (Popover API): automatische Platzierung mit Flip, optionaler Pfeil, schließt bei Klick außerhalb/Escape mit verwaltetem Fokus; Option data-open="liquid", bei der sich das Panel durch einen flüssigen „Hals“ aus dem Auslöser herauszieht und sich beim Schließen wieder in ihn zurückzieht.

Kategorie	Overlays
Typ	Web Component (`<mv-popover>`)
Status	stabil
Keywords	popover, floating, dropdown, panel, top-layer, gooey, liquid, morph

When to use

A small form, filter or settings panel must open next to its trigger without blocking the page
Interactive content like links or buttons must be reachable on touch and keyboard, unlike a tooltip
A liquid opening that stretches the panel out of its trigger fits the product's tone

Avoid when

The content is a list of actions that needs menu keyboard navigation → use Menu instead
The user must confirm or complete a task before continuing → use Dialog instead
The content is only a short label shown on hover or focus → use Tooltip instead

Installation

node scripts/add.mjs popover --out ./src/marvelous

KI-Agent mit dem MCP-Server von Marvelous UI: install_components({ slugs: ["popover"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Kopierte Dateien (inklusive Abhängigkeiten): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/focus.js, core/motion.js, core/position.js, components/popover/popover.js, components/popover/popover.css.

Verwendung

Referenz-Markup zum Starten und Anpassen mit Attributen, data-* und CSS-Variablen:

<div style="display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;align-items:center">
  <mv-popover placement="bottom-start">
    <button class="mv-button" data-variant="outline">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 3H3v18h18z" opacity=".35"/><path d="M8 3v18M3 8h18"/></svg>
      Dimensions
    </button>
    <div data-content style="--mv-popover-width:19rem">
      <div class="mv-popover-header">
        <h3 class="mv-popover-title">Dimensions</h3>
        <p class="mv-popover-description">Set the size of the selected layer.</p>
      </div>
      <form style="display:grid;gap:.5rem" onsubmit="event.preventDefault()">
        <label style="display:grid;grid-template-columns:5.5rem 1fr;align-items:center;gap:.75rem;font-size:.8125rem;color:var(--mv-fg-muted)">Width
          <input value="100%" class="mv-input" data-size="sm">
        </label>
        <label style="display:grid;grid-template-columns:5.5rem 1fr;align-items:center;gap:.75rem;font-size:.8125rem;color:var(--mv-fg-muted)">Max. width
          <input value="1,280px" class="mv-input" data-size="sm">
        </label>
        <label style="display:grid;grid-template-columns:5.5rem 1fr;align-items:center;gap:.75rem;font-size:.8125rem;color:var(--mv-fg-muted)">Height
          <input value="auto" class="mv-input" data-size="sm">
        </label>
      </form>
    </div>
  </mv-popover>

  <mv-popover placement="top" arrow>
    <button class="mv-button" data-variant="secondary">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.5 2.5 12 7l4.5 2.5L12 12l-2.5 4.5L7 12 2.5 9.5 7 7z"/><path d="M18 14v6M15 17h6"/></svg>
      What’s new
    </button>
    <div data-content style="--mv-popover-width:17rem">
      <div class="mv-popover-header" style="margin-bottom:0">
        <p style="margin:0 0 .25rem;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mv-accent-fg)">Step 1 of 3</p>
        <h3 class="mv-popover-title">Keyboard shortcuts</h3>
        <p class="mv-popover-description">Press <strong style="color:var(--mv-fg)">?</strong> at any time to see the full list of shortcuts.</p>
      </div>
      <div class="mv-popover-footer">
        <button class="mv-button" data-variant="ghost" data-size="sm" data-mv-close>Skip</button>
        <button class="mv-button" data-size="sm" data-mv-close>Next</button>
      </div>
    </div>
  </mv-popover>

  <mv-popover placement="bottom" data-open="liquid">
    <button class="mv-button">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/></svg>
      Share (liquid)
    </button>
    <div data-content style="--mv-popover-width:17.5rem">
      <div class="mv-popover-header" style="margin-bottom:.75rem">
        <h3 class="mv-popover-title">Share board</h3>
        <p class="mv-popover-description">Anyone with the link can view.</p>
      </div>
      <div style="display:flex;gap:.5rem">
        <input class="mv-input" data-size="sm" value="kanope.app/t/roadmap-q3" readonly aria-label="Share link">
        <button class="mv-button" data-size="sm" data-variant="secondary" data-mv-close>Copy</button>
      </div>
    </div>
  </mv-popover>
</div>

API

Attributes

Name	Typ	Default	Description
`placement`	top \| bottom \| left \| right[-start\|-end]	`bottom`	Preferred side and alignment, flipped when space runs out.
`offset`	number	`8`	Distance from the trigger (px).
`arrow`	boolean		Shows an arrow pointing at the trigger.
`open`	boolean		Opens/closes programmatically (reflects the state).
`data-open`	"liquid"		Opt-in: a “goo” layer (SVG blur filter + alpha threshold) pulls the panel out of the trigger’s edge with a liquid neck that thins and snaps, then the content appears; closing replays a pinch back into the trigger. Ignored with reduced motion (standard animation).

Properties

Name	Typ	Description
`isOpen`	boolean	Read-only: the panel is shown.

Methods

Name	Description
`show()`	Opens the panel.
`hide()`	Closes the panel.
`toggle()`	Toggles the state.
`liquidMorph(panel, anchor, "open" \| "close", done)`	popover.js export: plays the liquid morph on any already-positioned panel (returns { layer, cancel() }).

Events

Name	Description
`mv-open`	After opening.
`mv-close`	After closing (whatever the cause).

Content structure

Name	Description
`first child`	Trigger (button): receives aria-haspopup, aria-expanded and aria-controls.
`[data-content]`	Panel; an [autofocus] element inside receives focus on open, otherwise the first focusable one.
`[data-mv-close]`	Any element in the panel that closes the popover on click.

CSS classes

Name	Description
`mv-popover-header / -title / -description / -footer`	Content layout; the title and description are wired via aria-labelledby / aria-describedby.

CSS variables

Name	Default	Description
`--mv-popover-width`	`18rem`	Panel width.
`--mv-popover-padding`	`1rem`	Inner padding.
`--mv-popover-radius`		Corner radius.
`--mv-popover-bg`		Panel background (and arrow).

Accessibility

APG “Dialog (non-modal)” pattern: role=dialog named by .mv-popover-title, trigger with aria-expanded/aria-controls. Enter/Space open it, focus moves into the panel and returns to the trigger on close (Escape or button), unless the user clicked elsewhere. The panel is inert during the exit animation.