Popover enhancements [postponed until better UX]

[tborychowski]

Check how good the native solution is

https://mdn.github.io/dom-examples/popover-api/popover-hint/

Summary (2026-04-16): popovers with anchor positioning can now - with minimal effort and code:

• show elements aligned to other elements
• stay in screen bounds (if "bottom" alignment would make the popover go off the screen - it can try other alignments) when the target element is near the edge of the screen
• won't stay in screen bounds when scrolling (e.g. when target is near the edge due to scrolling)
• can be animated and styled
• can even show a tip (using the regular hacks)

Problem remains:

• tip can be easily aligned when usingjavascript positioning
• tip cannot be easily aligned when using CSS positioning, e.g.
  • if target is 10px from the left screen edge - the js tooltip can show e.g. above it, and the tip will be on the left edge of the tooltip. with CSS positioning, there's no way to know where to place the tip.

Hack #1:

• the tooltip can be made from 2 separate popovers: tooltip content and tip,
• they would need to be popover="manual" and opened with js
• they kind-of work, but flipping (when trying to stay on screen) is kinky: sometimes content will flip, but the tip would stay on the original position…