Popover — Vanilla

Floating panel with vanilla HTML. Toggle and click-outside via JS.

Popover

Trigger must have data-popover-trigger; content uses popover__content and data-popover-content. Wire click-to-toggle and click-outside/Escape to close in JS.

Add this component

The command below includes <strong>Popover</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Structure (toggle via JS)

Use Astro or Svelte component for full behavior.

HTML

html html 
<!-- Popover: trigger with data-popover-trigger, content with data-popover-content; toggle/close via JS -->
<div class="popover" data-popover id="my-popover">
  <button type="button" class="btn" data-popover-trigger>Open popover</button>
  <div class="popover__content" role="dialog" aria-hidden="true" hidden data-popover-content>
    Popover content here.
  </div>
</div>

Other frameworks: Astro · Svelte · Vue · React