Compare the default position with a 10px gutter on the main axis.
0px
Floating
10px
Floating
offset(0) / offset(10)Middleware
offset、shift、flip、size、arrow、hide、inline、auto-placement がどう協調するかを確認します。
ライブデモ
web-componentsScroll horizontally. The panel stays on top and shifts along the x-axis to remain visible.
scroll horizontally
Still on top
shift({padding: 8})Scroll up. Flip chooses the available side while shift keeps the panel inside the boundary.
scroll up
Final placement
bottom (default) + flip() → shift()Scroll horizontally. Floating UI Plus adds the arrow height to the requested visual gap.
scroll horizontally
Floating
offset(GAP) → shift() → arrow({element})Scroll vertically. Available height constrains the panel without adding a second popup scrollbar.
scroll vertically
Floating contentOneTwoThreeFourFive
size({apply: set maxWidth / maxHeight})Scroll vertically. Auto placement chooses the roomiest side while shift keeps it inside the boundary.
scroll vertically
Final placement
autoPlacement({padding: 8}) → shift({padding: 8})Scroll up. The panel dims after escaping, then hides when its reference is fully clipped.
scroll up
Floating
State: attached
hide() + hide({strategy: 'escaped'})Compare the detached bounding box with the relevant client rect of a wrapped inline anchor.
without
Text before
Bounding box
with inline()
Text before
Client rect
inline() → offset(8)Vue の例を読み込んでいます…