You Might Not Need Floating UI (soon)

GitHub →

Learn the CSS Anchor Positioning API through side-by-side comparisons with Floating UI.

Placement

Floating UI</>

Places your floating element relative to another element.

Click the dots
top

Placement

CSS</>

Places your floating element relative to another element.

Click the dots
top

Shift

Floating UI</>

Shifts your floating element to keep it in view.

Scroll the container
Popover

Shift

CSS</>

Shifts your floating element to keep it in view.

Only works on Chrome Canary v145

Scroll the container
Popover

Flip

Floating UI</>

Changes the placement of your floating element to keep it in view.

Scroll down
Tooltip

Flip

CSS</>

Changes the placement of your floating element to keep it in view.

Only works on Chrome v143

Scroll down
Tooltip

Size

Floating UI</>

Changes the size of your floating element to keep it in view.

Scroll the container
Dropdown

Size

CSS</>

Changes the size of your floating element to keep it in view.

Only works on Chrome Canary v145

Scroll the container
Dropdown

Arrow

Floating UI</>

Dynamically positions an arrow element that is center-aware.

Scroll the container
Popover

Arrow

CSS</>

Dynamically positions an arrow element that is center-aware.

Scroll the container
Popover

Virtual

Floating UI</>

Anchor relative to any coordinates, such as your mouse cursor.

Move your mouse
Move your mouse in here
Tooltip

Virtual

CSS</>

Anchor relative to any coordinates, such as your mouse cursor.

Only works on Chrome Canary v145

Move your mouse
Move your mouse in here
Tooltip