Viewport Boundary Detection
Popups are anchored to a trigger element, but that element can appear anywhere on the page — near an edge, inside a scrollable container, or on a small screen.
Without boundary detection, the Popup renders in its default position and gets clipped or hidden when it overflows the viewport. The collision property lets you define what the Popup does in those situations so it always remains fully visible regardless of where its anchor is on the screen.
The property specifies the behavior of the Popup when it does not fit in the viewport. It supports independent configuration for each axis:
- Vertical collision—Controls what happens when the Popup overflows the top or bottom edge of the viewport. By default, the Popup flips its vertical position relative to the anchor.
- Horizontal collision—Controls what happens when the Popup overflows the left or right edge of the viewport. By default, the Popup fits horizontally by shifting within the visible area.
The demo below has a Vertical Collision button placed at the bottom of the frame and a Horizontal Collision button placed at the right edge. Use the configurator at the top right corner of the demo to switch between collision modes and observe how each axis responds independently.