For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/popover.md.
A3S UI
  • English
  • next

      • Popover

      Popover presents a small amount of supporting content or lightweight controls near its trigger without interrupting the page's primary task.

      Live preview

      Usage

      A3S UI popovers are inline-positioned relative to the .popover wrapper. This differs from shadcn/ui's portalled Base UI implementation, but keeps the markup dependency-free and works with A3S UI's existing dropdown/select positioning model.

      Include CSS

      Import Tailwind and one full A3S UI style bundle.

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      Or import only the base CSS, Popover component CSS, and one style pack.

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/popover.css";
@import "@a3s-lab/ui/styles/a3s.css";

      Using CDN or bundler imports? See the Installation page.

      Include JavaScript

      Copy or serve the full A3S UI JavaScript bundle.

      <script src="/assets/js/all.min.js" defer></script>

      Or copy or serve the A3S UI runtime and Popover script.

      <script src="/assets/js/runtime.min.js" defer></script>
<script src="/assets/js/popover.min.js" defer></script>

      Using CDN or bundler imports? See the Installation page.

      Add your popover HTML

      <div id="demo-popover" class="popover">
  <button id="demo-popover-trigger" type="button" aria-expanded="false" aria-controls="demo-popover-popover" class="btn" data-variant="outline">Open popover</button>
  <div id="demo-popover-popover" data-popover aria-hidden="true" class="w-72">
    <header>
      <h4>Dimensions</h4>
      <p>Set the dimensions for the layer.</p>
    </header>
    <form class="grid gap-2" onsubmit="event.preventDefault()">
      <div class="grid grid-cols-3 items-center gap-4">
        <label for="demo-popover-width">Width</label>
        <input type="text" id="demo-popover-width" value="100%" class="input col-span-2 h-8" autofocus />
      </div>
      <div class="grid grid-cols-3 items-center gap-4">
        <label for="demo-popover-max-width">Max. width</label>
        <input type="text" id="demo-popover-max-width" value="300px" class="input col-span-2 h-8" />
      </div>
      <div class="grid grid-cols-3 items-center gap-4">
        <label for="demo-popover-height">Height</label>
        <input type="text" id="demo-popover-height" value="25px" class="input col-span-2 h-8" />
      </div>
      <div class="grid grid-cols-3 items-center gap-4">
        <label for="demo-popover-max-height">Max. height</label>
        <input type="text" id="demo-popover-max-height" value="none" class="input col-span-2 h-8" />
      </div>
    </form>
  </div>
</div>

      HTML structure

      <div class="popover">

      Relative wrapper for the trigger and inline popover content.

      <button type="button" aria-expanded="false" aria-controls="{ POPOVER_ID }">
      Trigger button. The script toggles aria-expanded and opens or closes the content.
      <div data-popover id="{ POPOVER_ID }" aria-hidden="true">
      Popover content. Supports data-side="top|right|bottom|left|inline-start|inline-end" and data-align="start|center|end". Open popovers use an 8-pixel side offset and 8-pixel viewport collision padding by default. Override them with data-side-offset and data-collision-padding, or set data-collision="none" to keep static CSS positioning. The runtime also positions popovers that are conditionally mounted with aria-hidden="false". While positioned, it publishes --available-height, data-resolved-side, data-resolved-align, and data-a3s-positioned="true".

      JavaScript API

      APITypeDescription
      popover.open(focus = true)MethodOpens the surface and focuses [autofocus] when present.
      popover.close(focusOnTrigger = true)MethodCloses the surface and optionally restores trigger focus.
      popover.toggle(focus = true)MethodToggles from the current aria-expanded state.
      popover.refresh()MethodRescans replaced direct trigger or content children.

      React usePopover and the equivalent Vue composable expose the same methods through call(). The controller does not own form data, remote requests, or product permissions.

      Examples

      Basic

      Live preview

      Align

      Live preview

      Sides

      Live preview

      With form

      Live preview

      RTL

      Popover alignment uses logical start and end offsets. Set dir="rtl" on a parent to flip start/end alignment.

      Live preview