Popover

Pagination
Progress

Popover

Usage

Template macros available

This component ships a popover() macro for Jinja and Nunjucks.

Basecoat 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 Basecoat’s existing dropdown/select positioning model.

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

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

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/popover.css";
@import "basecoat-css/styles/vega.css";

Using CDN or bundler imports? See the Installation page.

Include JavaScript

Copy or serve the full Basecoat JavaScript bundle.

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

Or copy or serve the Basecoat runtime and Popover script.

<script src="/assets/js/basecoat.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”.

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.