alder-ui demos

al-popover

A floating panel anchored to its invoker. placement picks the side, offset the gap, anchor another anchor by id; the browser flips it when there is no room.

Without JavaScript

popovertarget and the popover attribute are the platform's: no script runs. (Only the placement needs a browser with CSS anchor positioning.)

Opened by popovertarget. Escape or a click outside closes it.

Placements and offsets

Above, with a medium gap.

To the left, with a large gap.

To the right.

Anchored to the Top button, not its invoker.

Title and description

A heading inside the popover is its title and a paragraph its description.

Dimensions

Set the dimensions for the layer.