A lightweight anchored popover. Positions floating content relative to an anchor (slotted into anchor), with placement, an optional arrow, and click / hover / manual triggers. Flips on the main axis when it would overflow the viewport.
Show code Copy < nana-popup placement = "bottom-start" arrow > < nana-button slot = "anchor" variant = "secondary" >Click me</ nana-button > < div style = "padding:.75rem 1rem" >Popup content</ div > </ nana-popup >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/popup " ;
< nana-button > Anchor </ nana-button >
Use trigger="click" (default) or trigger="hover", and set placement
(top, bottom-start, right, …).
Show code Copy < nana-popup trigger = "hover" placement = "top" arrow > < nana-button slot = "anchor" variant = "secondary" >Hover me</ nana-button > < div style = "padding:.75rem 1rem" >Shown on hover</ div > </ nana-popup >
Properties Property Attribute Type Default Description arrow— booleanfalseShow a pointing arrow open— booleanfalseOpen state placement— PopupPlacement'bottom'Where the popup sits relative to the anchor trigger— PopupTrigger'click'How the popup is triggered
Events Event Description nana-showFired when the popup opens nana-hideFired when the popup closes
Slots Slot Description anchorThe trigger element (default)The floating content
CSS parts Part Description ::part(popup)The floating panel ::part(arrow)The arrow
CSS custom properties Property Description --nana-popup-bgPanel background --nana-popup-radiusPanel corner radius
Event Type Description nana-showCustomEventFired when the popup opens nana-hideCustomEventFired when the popup closes
Slot Description anchorThe trigger element (default)The floating content
Variable Default Description --nana-popup-bg— Panel background --nana-popup-radius— Panel corner radius
Part Description popupThe floating panel arrowThe pointing arrow
Explore Popup interactively Every state, prop, and edge case — with live controls — in Storybook.
