v1.0.8

Popover

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

Interactive Requires: veritheme.js JS init: automatic

Default

Popover with form content.

html

Dimensions

Set the dimensions for the layer.

<div class="popover-wrapper">
  <button data-popover-trigger="pop1">Open popover</button>
  <div id="pop1" class="vt-popover-content vt-popover-bottom-start vt-w-80 vt-p-4">
    <h4>Title</h4>
    <p>Popover content...</p>
  </div>
</div>

User Card

Popover showing user information.

html
JD

John Doe

@johndoe

Full-stack developer. Building Veritheme. Open source enthusiast.

256 following 1.2k followers 
<div class="popover-wrapper">
  <button data-popover-trigger="pop2" class="vt-inline-flex vt-items-center vt-gap-2">
    <div class="vt-w-6 vt-h-6 vt-rounded-full vt-bg-surfaces-moderate">JD</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-surfaces-moderate">JD</div>
      <div>
        <p class="vt-text-sm vt-font-semibold">John Doe</p>
        <p class="vt-text-xs vt-text-mains-quaternary">@johndoe</p>
      </div>
    </div>
    <p class="vt-text-sm vt-text-mains-quaternary vt-mb-3">Full-stack developer...</p>
    <div class="vt-flex vt-gap-4 vt-text-xs">
      <span><strong>256</strong> following</span>
      <span><strong>1.2k</strong> followers</span>
    </div>
  </div>
</div>

Placements

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

html
Top Popover
Opens above the trigger.
Right Popover
Opens to the right side.
Bottom Popover
Default bottom placement.
Left Popover
Opens to the left side.
<!-- Top -->
<div class="popover-wrapper">
  <button data-popover-trigger="pop-top">Top</button>
  <div id="pop-top" class="vt-popover-content vt-popover-top vt-w-56 vt-p-3">...</div>
</div>

Static Preview

Popover content inline for reference.

Dimensions

Set the dimensions for the layer.

Guidelines

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

Filter results
Narrow the list without leaving the page.
Do
Anchor a popover to its trigger for lightweight, non-blocking tasks.
Permanently delete account?

This removes all your data and cannot be undone.

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