Popover 1.2.0

Das <velin-popover> web component displays rich floating content panels anchored to a trigger element, with configurable placement, triggers, and WCAG-oriented roles and focus management. English: Popover

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Foundation wo vermerkt.

Wann verwenden

Verankerte Panels mit kurzem Rich Content (Hilfetext, Mini-Formulare, Bestätigungen nahe am Trigger).
Wenn Klick-/Fokus-Trigger einen Fokus-Trap und Escape Schließen ohne ganzseitiges Modal benötigen.

Wann nicht

Single-line hints — use Tooltip.
Blocking, page-level tasks — use Modal or Dialog.
Menus of actions — prefer Dropdown or Menubar.

Basis-Popover

Dies ist der Popover-Inhalt (Default-Slot).

<velin-popover title="Popover title" trigger="click">
  <button class="velin-btn velin-btn--primary" slot="trigger">Click me</button>
  <p>This is the popover body (default slot).</p>
</velin-popover>

Platzierungen

Setze placement auf top, bottom, start, or end (logische Inline-Positionen).

<velin-popover placement="top" title="Top">
  <button slot="trigger">Top</button>
  <p>Content</p>
</velin-popover>

<velin-popover placement="end" title="End">
  <button slot="trigger">End</button>
  <p>Content</p>
</velin-popover>

<velin-popover placement="bottom" title="Bottom">
  <button slot="trigger">Bottom</button>
  <p>Content</p>
</velin-popover>

<velin-popover placement="start" title="Start">
  <button slot="trigger">Start</button>
  <p>Content</p>
</velin-popover>

Trigger

Das trigger Attribut akzeptiert click, hover, or focus.

<velin-popover trigger="hover" title="Hover popover">
  <button slot="trigger">Hover me</button>
  <p>Shown on hover or focus.</p>
</velin-popover>

<velin-popover trigger="focus" title="Focus popover">
  <input slot="trigger" placeholder="Focus me" aria-label="Focus trigger">
  <p>Shown while focused.</p>
</velin-popover>

Mit Titel

Füge ein title Attribut für eine gestaltete Titelleiste hinzu (für XSS-Sicherheit escaped).

<velin-popover title="Popover Title">
  <button class="velin-btn velin-btn--secondary" slot="trigger">
    Titled Popover
  </button>
  <p>And here's some content below the title.</p>
</velin-popover>

Barrierefreiheit

trigger="click" (default): popover panel uses role="dialog"; trigger="hover" uses role="tooltip".
Trigger receives aria-expanded; click/focus triggers also get aria-haspopup and aria-controls.
Click popovers trap focus with Tab / Shift+Tab and close on Escape, restoring focus to the trigger.
Hover popovers open on pointer enter and focusin; they close when focus or pointer leaves the component.
Title text from the title attribute is HTML-escaped before render.

API

Attribute

Attribut	Typ	Beschreibung
`open`	Boolean	Observed — whether the popover is visible
`placement`	String	Read on connect — `top`, `bottom` (default), `start`, `end`
`trigger`	String	Read on connect — `click` (default), `hover`, or `focus`
`title`	String	Optional heading above the default slot (escaped)
`aria-label`	String	Fallback name when `title` is empty

Slots & Parts

Name	Art	Beschreibung
`trigger`	Slot	Activator control
(default)	Slot	Panel body
`popover`, `title`	CSS parts	Shadow styling hooks

Methoden

Methode	Beschreibung
`open()`	Popover anzeigen
`close()`	Popover ausblenden
`toggle()`	Sichtbarkeit umschalten

No custom events are dispatched. Only open is an observed attribute — set placement/trigger/title before connect (or rebuild the element) if you change them dynamically.

Best Practices & Fallstricke

Put a real <button> (or focusable control) in slot="trigger"; non-button hosts get role="button" + tabindex="0".
Nutze trigger="hover" only for non-critical tips — hover panels use role="tooltip" and do not trap focus.
Prefer click + dialog role when the panel contains interactive content.