45 / FLOATING GEOMETRY
Collision-aware Popover
The problem
A popover fixed to one side gets clipped or hidden when the anchor is near a container edge.
The solution
The popover flips and shifts to avoid collisions with edges.
Experiment
Task: Open the popover from anchors near each edge.
NAIVE
placement—
collisionoff
THOUGHTFUL
placement—
collisionon
Play with the values
8px
How it works
Seen in
Tooltips
Hints flip above when there's no space below.
Dropdowns
Menus open upward near the bottom of the screen.
Date pickers
Calendars reposition to remain fully visible.
Selects
Option lists shift to avoid clipping at edges.