Popover

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 a 4-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. While positioned, the runtime publishes --available-height, data-resolved-side, data-resolved-align, and data-a3s-positioned="true".

Examples

Basic

Align

Sides

With form

RTL

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

Dimensions

Usage

Include CSS

Include JavaScript

Add your popover HTML

HTML structure

Examples

Basic

Title

Align

Sides

With form

Dimensions

RTL

العنوان

#Popover

#Usage

Include CSS

Include JavaScript

Add your popover HTML

#HTML structure

#Examples

#Basic

#Align

#Sides

#With form

#RTL

Popover

Usage

HTML structure

Examples

Basic

Align

Sides

With form

RTL