Popover

A Popover is an anchored overlay that positions itself relative to an element. A Popper is the lower-level positioning utility.

Basic Popover

Open Popover

Popover Content

This popover positions itself below the anchor button. Click outside or press Escape to close.

<me-button id="anchor">Open</me-button> <me-popover anchor="#anchor" id="my-popover"> <div style="padding:16px">Content</div> </me-popover> <script> document.getElementById('anchor').onclick = () => document.getElementById('my-popover').toggleAttribute('open'); </script>

Anchor Origins

Top Left

Anchored: top/left → opens upward

Bottom Right

Anchored: bottom/right

Center

Anchored: center/center

<me-popover anchor="#btn" anchor-origin-vertical="bottom" anchor-origin-horizontal="left" transform-origin-vertical="top" transform-origin-horizontal="left"> ... </me-popover>

Popper (low-level)

Popper provides positioning without a backdrop or Paper wrapper. Useful for tooltips, dropdowns, custom overlays.

Anchor

Popper on the right

<me-popper anchor="#anchor" placement="bottom">  </me-popper>

API — Popover

Attribute	Type	Default	Description
`open`	boolean	false	Shows the popover.
`anchor`	CSS selector	—	Selector of the anchor element to position relative to.
`anchor-origin-vertical`	top \| center \| bottom	bottom	Vertical point on the anchor to attach to.
`anchor-origin-horizontal`	left \| center \| right	left	Horizontal point on the anchor to attach to.
`transform-origin-vertical`	top \| center \| bottom	top	Vertical point on the popover that attaches to the anchor.
`transform-origin-horizontal`	left \| center \| right	left	Horizontal point on the popover that attaches to the anchor.

API — Popper

Attribute	Type	Default	Description
`open`	boolean	false	Shows the popper.
`anchor`	CSS selector	—	Anchor element selector.
`placement`	top \| bottom \| left \| right \| top-start \| top-end \| bottom-start \| bottom-end \| left-start \| left-end \| right-start \| right-end	bottom	Placement relative to anchor.