cnc-popup
An anchored overlay for menus, pickers, cards, and other interactive content. It finds an anchor, opens from configured pointer interactions, stays positioned while scrolling, and flips when space is limited.
Quick start
Give the anchor a stable selector and pass it to anchor. With the default
trigger="click", the popup owns toggling and click-away dismissal—no page script
is required.
<cnc-button id="settings-trigger" label="Open popup"></cnc-button>
<cnc-popup anchor="#settings-trigger" placement="bottom-start">
<div>Popup content</div>
</cnc-popup>Usage guidance
A popup is the low-level anchored surface: you give it an anchor and own its
open
state. That is more wiring than most cases need, so reach for
cnc-drop
whenever a trigger and its panel belong together — it composes a popup and hands you the
anchor, aria-expanded and outside-click for free. Use
cnc-tooltip
for brief guidance and cnc-overlay when the content is not anchored to anything.
Anchor to an element that stays in the document while the popup is open. An anchor that is
itself re-rendered — a row inside an x-for, say — leaves the popup
positioned against a node that no longer exists; anchor to the stable container instead and let
placement
and offset do the rest.