Popover 1.2.2

The <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. Deutsch: Popover De

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Anchored panels with short rich content (help text, mini forms, confirmations that stay near the trigger).
When click/focus triggers need a focus trap and Escape close without a full-page modal.

When not

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

Basic popover

This is the popover body (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>

Placements

Set placement to top, bottom, start, or end (logical inline positions).

<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>

Triggers

The trigger attribute accepts 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>

With title

Add a title attribute for a styled title bar (escaped for XSS safety).

<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>

Accessibility

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

Attributes

Attribute	Type	Description
`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	Kind	Description
`trigger`	Slot	Activator control
(default)	Slot	Panel body
`popover`, `title`	CSS parts	Shadow styling hooks

Methods

Method	Description
`open()`	Show the popover
`close()`	Hide the popover
`toggle()`	Toggle visibility

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 & pitfalls

Put a real <button> (or focusable control) in slot="trigger"; non-button hosts get role="button" + tabindex="0".
Use 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.