1. Docs
2. Components
3. Popover

Popover

The <velin-popover> web component displays rich floating content panels anchored to a trigger element, with configurable placement, triggers, and WCAG 2.2–aligned roles and focus management (0.7.0).

Basic popover

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

JavaScript API

Attributes

Methods