CSS is mind-blowing 🤯 Browser does what it can to keep the menus in view. Even when you scroll.
Zero JavaScript (Aside from the Draggable part)
This is the important HTML 👇 (anchor)
<button id="trigger" popovertarget="menu">
<div popover="auto" id="menu" anchor="trigger">
3 lines of CSS to make your tooltips/menus stay in view 🤯
(Check it! 👇)
[popover] {
top: anchor(top);
left: anchor(right);
position-try-options: flip-block, flip-inline;
}
Responds to scroll, layout change, etc. Watch the nested menu 👇
Anchor Positioning is coming 🚀