Overlays & Modals HTML5 popover Zero-JS Anchor CSS Tailwind v4

Popover

Native HTML Popover API (popover='auto') with zero JavaScript, CSS anchor positioning, and automatic light dismiss.

Interactive Preview

Live Edit & Viewport Resizer

Installation

Add the Popover component to your project via CLI:

terminal bash

npx plain-ui add popover

Features

✓ Standard HTML popover='auto' attribute
✓ Zero-JS toggle via popovertarget='my-popover'
✓ Automatic click-outside dismissal (Light Dismiss)
✓ Smooth CSS entry/exit animations via @starting-style
✓ Top-layer placement without z-index conflicts

Variants & Examples

Action Menu Popover

Quick action menu flyout with icon options.

popover-action-menu-popover.html html

<div class="flex justify-center">
  <button 
    popovertarget="action-menu-popover"
    class="p-2 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 cursor-pointer"
  >
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
  </button>

  <div 
    id="action-menu-popover" 
    popover="auto"
    class="m-0 mt-2 p-1.5 rounded-xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 shadow-xl w-48 text-sm"
  >
    <button class="w-full flex items-center gap-2 px-3 py-1.5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg text-left cursor-pointer">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
      Edit details
    </button>
    <button class="w-full flex items-center gap-2 px-3 py-1.5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg text-left cursor-pointer">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
      Duplicate
    </button>
    <div class="my-1 border-t border-zinc-100 dark:border-zinc-800"></div>
    <button class="w-full flex items-center gap-2 px-3 py-1.5 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/40 rounded-lg text-left cursor-pointer">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
      Delete item
    </button>
  </div>
</div>

Attributes & Classes

Attribute / Prop	Type	Default	Description
popover	'auto' \| 'manual'	'auto'	Enables popover behavior with automatic light-dismiss.
popovertarget	string	-	ID of the popover element to trigger on click.

Accessibility & Keyboard Navigation

• Popover API natively handles focus management and light-dismiss on Escape or outside click.
• No JavaScript required to maintain toggle state.

← Dialog Floating Label Input →