Popover

For elements with the popover attribute: showPopover(), hidePopover(), togglePopover() and popovertarget buttons are animated; top layer, light dismiss and focus stay native.

Live example

popover="auto"

Esc or a click outside close it, natively and instantly.

popover="manual"

Only the button or a script closes it.

Usage

<button popovertarget="menu">Menu</button>
<div id="menu" popover>…</div>

import { createRenderer, createPopoverFx, inkVeilEffect } from 'webgl-ui'

const renderer = createRenderer()
// 'behind': the veil paints the popover's surface behind its content: it appears from nothing.
createPopoverFx(document.querySelector<HTMLElement>('#menu')!, { renderer, effect: inkVeilEffect, layout: 'behind' })

/* The shader paints the surface: keep it transparent while animating, and say which color to paint. */
[popover] { --fx-cover: 251, 248, 240; }
[popover][data-fx-behind][data-animating] { background: transparent; }
[popover][data-animating] > :not(canvas) { opacity: var(--p, 1); }

Options

Option	Type	Default	Description
`renderer`	`Renderer \| () => Renderer`	required	The shared renderer.
`effect`	`EffectDef`	`dissolveEffect`	Any cover effect.
`duration`	`number`	`800`	Opening in ms; closing takes 70%.
`layout`	`'host' \| 'behind'`	`'host'`	`host`: a cover over the popover recedes. `behind`: a veil paints the popover's surface behind its content, so it appears from nothing.
`trace`	`(message) => void`	none	Debug hook.

Returns

Member	Description
`showPopover(options?)`	Native call, synchronous (same errors), then the animation. Also installed on the element.
`hidePopover()`	Animated; the native method runs at the end.
`togglePopover(force?)`	Returns the state it is heading to.
`destroy()`	Restores the native methods and removes the listeners.
`debug()`	`{ open, target, running, progress }`.

CSS hooks

Hook	Meaning
`[data-animating]`, `--p`	Set on the popover while animating.
`[data-fx-behind]`	Present with `layout: 'behind'`.
`--fx-cover`	The color the shader paints, as `r, g, b`. Default: the popover background.

Behavior and accessibility

Esc, light dismiss and another auto popover opening close it instantly: the browser does them and they cannot be vetoed, so they are not animated.
popovertarget buttons run an internal algorithm, not the JS methods, so their click is intercepted and routed to the animated methods.
commandfor buttons (show-popover, hide-popover, toggle-popover) are animated through their cancelable command event. popover="hint" works like the other values.

Full table: native parity, popover.