Popover

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

Default

Popover with form content.

html

Dimensions

Set the dimensions for the layer.

<div class="popover-wrapper uc-relative uc-inline-block">
  <button data-popover-trigger="pop1">Open popover</button>
  <div id="pop1" class="uc-popover-content uc-popover-bottom-start uc-w-80 uc-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 uicraft. Open source enthusiast.

256 following 1.2k followers 
<div class="popover-wrapper uc-relative uc-inline-block">
  <button data-popover-trigger="pop2" class="uc-inline-flex uc-items-center uc-gap-2">
    <div class="uc-w-6 uc-h-6 uc-rounded-full uc-bg-neutrals-muted">JD</div>
    @johndoe
  </button>
  <div id="pop2" class="uc-popover-content uc-popover-bottom-start uc-w-72 uc-p-4">
    <div class="uc-flex uc-items-center uc-gap-3 uc-mb-3">
      <div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-neutrals-muted">JD</div>
      <div>
        <p class="uc-text-sm uc-font-semibold">John Doe</p>
        <p class="uc-text-xs uc-text-fg-disabled">@johndoe</p>
      </div>
    </div>
    <p class="uc-text-sm uc-text-fg-disabled uc-mb-3">Full-stack developer...</p>
    <div class="uc-flex uc-gap-4 uc-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 uc-relative uc-inline-block">
  <button data-popover-trigger="pop-top">Top</button>
  <div id="pop-top" class="uc-popover-content uc-popover-top uc-w-56 uc-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
.uc-popover-content Content Popover content container — hidden by default
.uc-open State Applied when popover is visible
.uc-popover-top Placement Positions popover above trigger
.uc-popover-bottom Placement Positions popover below trigger
.uc-popover-left Placement Positions popover to the left of trigger
.uc-popover-right Placement Positions popover to the right of trigger
.uc-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