v1.0.0

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.

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