FloatingPopup experiment

<Tooltip slots={{ popper: FloatingPopup }} />

Side-by-side: Popper.js vs FloatingPopup

Default (Popper.js)

FloatingPopup

Placement

Arrow

Follow cursor

Move cursor here

Custom middleware (offset)

Auto placement (middleware)

Uses autoPlacement() middleware. Scroll the button near an edge, then hover.

Strategy

CSS variables

FloatingPopup sets --anchor-width, --anchor-height, --available-width, --available-height on the floating element.