73 Collision-aware Popover. 73 of 95.
73/FLOATING GEOMETRY/73 of 95
Collision-aware Popover
When there's no room below, open above.
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
Play with the values
8px
How it works
- The popover prefers its default placement, usually below the trigger.
- Overflow against the viewport is detected after that placement.
- When there is no room, it flips to the opposite side.
- If it still overflows along the other axis, it shifts until it fits.
- The final position stays within the viewport bounds.
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.