Skip to main content

Popover

Floating panel anchored to a trigger element.

Selectors

.popover
Positioned floating content container.
.popover-menu
Action list variant with item styling.
.popover-arrow
Adds a directional arrow indicator.
.popover-end
Right-aligns the panel with the trigger.
.popover-top
Positions popover above the trigger.
data-no-dismiss
Prevents a menu item from auto-closing the popover when clicked (requires js/cider.js).

Default

Dimensions

Set the dimensions for the layer.

HTML 
<div class="popover">
  <button class="btn-tinted">Open Popover</button>
  <div popover>
    <h4 class="text-sm font-semibold">Dimensions</h4>
    <p class="mt-1 text-xs text-tertiary-foreground">Set the dimensions for the layer.</p>
    <div class="mt-3 space-y-2">
      <div class="space-y-2">
        <label>Width</label>
        <input type="text" value="100%" />
      </div>
      <div class="space-y-2">
        <label>Height</label>
        <input type="text" value="25px" />
      </div>
    </div>
  </div>
</div>

Menu

HTML 
<div class="popover popover-menu">
  <button class="btn-plain">
    Options
    <svg class="size-4 text-tertiary-foreground" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
  </button>
  <div popover>
    <button>
      <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
      Profile
    </button>
    <button>
      <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
      Settings
    </button>
    <button disabled>
      <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
      Admin
    </button>
    <hr />
    <button class="text-destructive">
      <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
      Sign Out
    </button>
  </div>
</div>

Arrow

This popover has a directional arrow pointing to its trigger.

HTML 
<div class="popover popover-arrow">
  <button class="btn-tinted">With Arrow</button>
  <div popover>
    <p class="text-sm">This popover has a directional arrow pointing to its trigger.</p>
  </div>
</div>

Positioning

Below, left-aligned

Below, right-aligned

Above, left-aligned

Above, right-aligned

HTML 
<div class="grid grid-cols-2 gap-6">
  <!-- Default: below, left-aligned -->
  <div class="space-y-1">
    <div class="popover popover-menu">
      <button class="btn-plain">
        Default
        <svg class="size-4 text-tertiary-foreground" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
      </button>
      <div popover>
        <button>Profile</button>
        <button>Settings</button>
      </div>
    </div>
    <p class="text-xs text-tertiary-foreground">Below, left-aligned</p>
  </div>
  <!-- Right-align the panel with the trigger -->
  <div class="flex flex-col items-end space-y-1">
    <div class="popover popover-menu popover-end">
      <button class="btn-plain">
        End
        <svg class="size-4 text-tertiary-foreground" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
      </button>
      <div popover>
        <button>Profile</button>
        <button>Settings</button>
      </div>
    </div>
    <p class="text-xs text-tertiary-foreground">Below, right-aligned</p>
  </div>
  <!-- Open above the trigger -->
  <div class="space-y-1">
    <div class="popover popover-menu popover-top">
      <button class="btn-plain">
        Top
        <svg class="size-4 text-tertiary-foreground" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
      </button>
      <div popover>
        <button>Profile</button>
        <button>Settings</button>
      </div>
    </div>
    <p class="text-xs text-tertiary-foreground">Above, left-aligned</p>
  </div>
  <!-- Combine both: above and right-aligned -->
  <div class="flex flex-col items-end space-y-1">
    <div class="popover popover-menu popover-top popover-end">
      <button class="btn-plain">
        Top + End
        <svg class="size-4 text-tertiary-foreground" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
      </button>
      <div popover>
        <button>Profile</button>
        <button>Settings</button>
      </div>
    </div>
    <p class="text-xs text-tertiary-foreground">Above, right-aligned</p>
  </div>
</div>

By default the panel opens below and left-aligned with the trigger. If it would overflow the viewport, it automatically flips. Add modifier classes to force a specific alignment:

User Profile

JD

John Doe

john@example.com

HTML 
<div class="popover popover-menu">
  <button aria-label="User profile" class="avatar bg-primary text-primary-foreground cursor-pointer">JD</button>
  <div popover>
    <div class="flex items-center gap-3 px-2 py-1.5">
      <div class="avatar avatar-sm bg-primary/10 text-primary">JD</div>
      <div>
        <p class="text-sm font-semibold">John Doe</p>
        <p class="text-xs text-tertiary-foreground">john@example.com</p>
      </div>
    </div>
    <hr />
    <button>
      <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
      Profile
    </button>
    <button>
      <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
      Settings
    </button>
    <hr />
    <button class="text-destructive">
      <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
      Sign Out
    </button>
  </div>
</div>

Usage

Uses the native Popover API for open/close, click outside to dismiss, and Escape key. JS adds positioning, focus management, and keyboard navigation for .popover-menu.

  • Arrow keys navigate menu items. Home/End jump to first/last.
  • Type-ahead: press a letter to jump to the first item starting with that character.
  • Add data-no-dismiss to a menu item to prevent auto-closing on click.
<!-- npm -->
<script src="node_modules/ciderui/js/cider.js"></script>

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/gh/newlix/ciderui@main/js/cider.js"></script>

Accessibility

  • Trigger receives aria-expanded and aria-haspopup automatically.
  • Escape closes the popover and returns focus to the trigger.
  • Tab from the last item closes the popover and moves focus forward.
  • Menu variant: Arrow Up / Down to navigate items, Home / End to jump to first or last.
  • Type-ahead: press a letter key to jump to the first matching menu item.