components popover

components/popover

Import: import { Popover, PopoverTrigger } from "@tundralibs/ui/popover"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Popover

Popover(props: PopoverProps): Html

PopoverTrigger

PopoverTrigger(props: PopoverTriggerProps): Html

Convenience trigger; any element with data-popover-trigger works.

Types

PopoverProps

Prop	Type	Required	Description
id	string	yes	Required: the panel can be lazily loaded into, so it needs an id.
trigger	Html	yes
content	Html		Panel contents. Omit and pass loadFrom to fetch on first open.
align	`"center"	"start"	"end"`
open	boolean
loadFrom	string		Lazy-load the panel body on mount (rAPId data-action + data-load, GET only).
label	string		Accessible name for the dialog panel.

PopoverTriggerProps

Prop	Type	Required	Description
controls	string	yes
label	string	yes
open	boolean
className	string

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

A profile card on a name

Popover({
  id: "ada-card",
  trigger: PopoverTrigger({ controls: "ada-card", label: "Ada Lovelace" }),
  content: html`
    <div class="popover__header"><span class="popover__title">Ada Lovelace</span></div>
    <p>Finance · joined 2024</p>
  `,
})

<div class="popover" data-popover>
  <button type="button" class="btn btn--outline btn--sm" aria-expanded="false" aria-controls="ada-card" data-popover-trigger>Ada Lovelace</button>
  <div class="popover__panel" id="ada-card" role="dialog" hidden="">
    <span class="popover__arrow"></span>
    <div class="popover__header">
      <span class="popover__title">Ada Lovelace</span>
    </div>
    <p>Finance · joined 2024</p>
  </div>
</div>

Loaded on first open

Popover({
  id: "ada-card",
  trigger: PopoverTrigger({ controls: "ada-card", label: "Ada Lovelace" }),
  loadFrom: "/fragments/people/ada",
})

<div class="popover" data-popover>
  <button type="button" class="btn btn--outline btn--sm" aria-expanded="false" aria-controls="ada-card" data-popover-trigger>Ada Lovelace</button>
  <div class="popover__panel" id="ada-card" role="dialog" hidden="" data-action="/fragments/people/ada" data-load="">
    <span class="popover__arrow"></span>
  </div>
</div>

CSS hooks

Classes defined by components/popover/popover.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.btn, .popover, .popover--end, .popover--start, .popover__arrow, .popover__body, .popover__footer, .popover__header, .popover__panel, .popover__stat, .popover__stat-label, .popover__stat-value, .popover__stats, .popover__subtitle, .popover__title

Behaviour

components/popover/popover.js ships in ui.js (delegated on document, re-initialised after a rAPId swap).

Attributes it reads or writes: data-popover, data-popover-trigger.