Popover

Displays rich content in a portal, triggered by a button.

Interactive Requires: veritheme.js JS init: automatic

Default

Popover with form content.

html

<div class="popover-wrapper">
  <button class="vt-btn vt-btn-bordered" data-popover-trigger="pop1">
    Open popover
  </button>
  <div id="pop1" class="vt-popover-content vt-popover-bottom-start vt-w-80 vt-p-4">
    <div class="vt-space-y-2 vt-mb-4">
      <h4 class="vt-font-medium vt-text-sm">Dimensions</h4>
      <p class="vt-text-xs vt-text-foreground-muted">Set the dimensions for the layer.</p>
    </div>
    <div class="vt-grid vt-grid-cols-2 vt-gap-3">
      <div class="vt-space-y-1">
        <label class="vt-text-xs vt-font-medium" for="popover-1-1">Width</label>
        <input type="text" value="100%" class="vt-input vt-h-8 vt-px-2 vt-text-xs" id="popover-1-1">
      </div>
      <div class="vt-space-y-1">
        <label class="vt-text-xs vt-font-medium" for="popover-1-2">Height</label>
        <input type="text" value="25px" class="vt-input vt-h-8 vt-px-2 vt-text-xs" id="popover-1-2">
      </div>
      <div class="vt-space-y-1">
        <label class="vt-text-xs vt-font-medium" for="popover-1-3">Max Width</label>
        <input type="text" value="300px" class="vt-input vt-h-8 vt-px-2 vt-text-xs" id="popover-1-3">
      </div>
      <div class="vt-space-y-1">
        <label class="vt-text-xs vt-font-medium" for="popover-1-4">Max Height</label>
        <input type="text" value="none" class="vt-input vt-h-8 vt-px-2 vt-text-xs" id="popover-1-4">
      </div>
    </div>
  </div>
</div>

User Card

Popover showing user information.

html

<div class="popover-wrapper">
  <button data-popover-trigger="pop2" class="vt-inline-flex vt-items-center vt-gap-2 vt-text-sm vt-font-medium vt-hover:underline vt-underline-offset-4">
    <div class="vt-w-6 vt-h-6 vt-rounded-full vt-bg-surface-moderate vt-flex vt-items-center vt-justify-center"><span class="vt-text-xs vt-font-medium vt-text-foreground-muted">JD</span></div>
    @johndoe
  </button>
  <div id="pop2" class="vt-popover-content vt-popover-bottom-start vt-w-72 vt-p-4">
    <div class="vt-flex vt-items-center vt-gap-3 vt-mb-3">
      <div class="vt-w-10 vt-h-10 vt-rounded-full vt-bg-surface-moderate vt-flex vt-items-center vt-justify-center"><span class="vt-text-sm vt-font-medium vt-text-foreground-muted">JD</span></div>
      <div>
        <p class="vt-text-sm vt-font-semibold">John Doe</p>
        <p class="vt-text-xs vt-text-foreground-muted">@johndoe</p>
      </div>
    </div>
    <p class="vt-text-sm vt-text-foreground-muted vt-mb-3">Full-stack developer. Building Veritheme. Open source enthusiast.</p>
    <div class="vt-flex vt-gap-4 vt-text-xs vt-text-foreground-muted">
      <span><strong class="vt-text-foreground-primary">256</strong> following</span>
      <span><strong class="vt-text-foreground-primary">1.2k</strong> followers</span>
    </div>
  </div>
</div>

Placements

Popover can open from all sides: top, right, bottom, and left.

html

<div class="vt-grid vt-grid-cols-2 vt-gap-12 vt-w-full vt-max-w-md vt-place-items-center">
  <div class="popover-wrapper">
    <button class="vt-btn vt-btn-secondary" data-popover-trigger="pop3">
      Top
    </button>
    <div id="pop3" class="vt-popover-content vt-popover-top vt-w-56 vt-p-3">
      <div class="vt-text-sm vt-font-semibold vt-mb-1">Top Popover</div>
      <div class="vt-text-xs vt-text-foreground-muted">Opens above the trigger.</div>
    </div>
  </div>

  <div class="popover-wrapper">
    <button class="vt-btn vt-btn-secondary" data-popover-trigger="pop4">
      Right
    </button>
    <div id="pop4" class="vt-popover-content vt-popover-right vt-w-56 vt-p-3">
      <div class="vt-text-sm vt-font-semibold vt-mb-1">Right Popover</div>
      <div class="vt-text-xs vt-text-foreground-muted">Opens to the right side.</div>
    </div>
  </div>

  <div class="popover-wrapper">
    <button class="vt-btn vt-btn-secondary" data-popover-trigger="pop5">
      Bottom
    </button>
    <div id="pop5" class="vt-popover-content vt-popover-bottom vt-w-56 vt-p-3">
      <div class="vt-text-sm vt-font-semibold vt-mb-1">Bottom Popover</div>
      <div class="vt-text-xs vt-text-foreground-muted">Default bottom placement.</div>
    </div>
  </div>

  <div class="popover-wrapper">
    <button class="vt-btn vt-btn-secondary" data-popover-trigger="pop6">
      Left
    </button>
    <div id="pop6" class="vt-popover-content vt-popover-left vt-w-56 vt-p-3">
      <div class="vt-text-sm vt-font-semibold vt-mb-1">Left Popover</div>
      <div class="vt-text-xs vt-text-foreground-muted">Opens to the left side.</div>
    </div>
  </div>
</div>

Static Preview

Popover content inline for reference.

Dimensions

Set the dimensions for the layer.

Width

Height

Guidelines

Small interactive overlay anchored to a trigger (filters, pickers, hints with actions). NOT blocking/critical flows → dialog.

Anchor a popover to its trigger for lightweight, non-blocking tasks.

Don't

Don't cram blocking or critical flows into a popover — use a dialog.

API Reference

All data attributes and utility classes available for the Popover component.

Class	Type	Description
`[data-popover-trigger]`	Attribute	Trigger button — value matches popover ID
`.vt-popover-content`	Content	Popover content container — hidden by default
`.vt-open`	State	Applied when popover is visible
`.vt-popover-top`	Placement	Positions popover above trigger
`.vt-popover-bottom`	Placement	Positions popover below trigger
`.vt-popover-left`	Placement	Positions popover to the left of trigger
`.vt-popover-right`	Placement	Positions popover to the right of trigger
`.vt-popover-bottom-start`	Placement	Bottom placement aligned to start edge

Accessibility

Keyboard and screen reader support.

Feature	Details
Trigger	Use <button> element for trigger, not div or span
ARIA	Add aria-expanded on trigger, aria-labelledby on popover content
Focus Trap	Trap focus within popover when open, restore to trigger on close
Keyboard	Escape closes popover, Tab cycles through focusable elements inside
Click Outside	Clicking outside popover closes it automatically

Built with:

Button