Floating UI – Positioning for tooltips, popovers, dropdowns, and more

Floating UI is a low-level library for positioning “floating” elements like tooltips, popovers, dropdowns, menus and more. Floating UI exposes primitives which enable a floating element to be positioned next to a given reference element while appearing in view for the user as best as possible. Features include overflow prevention (or collision awareness), placement flipping, and more.

import {computePosition, flip} from '@floating-ui/dom';

const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');

const {x, y} = await computePosition(button, tooltip, {
  placement: 'top',
  middleware: [flip()]
});

Object.assign(tooltip.style, {
  left: `${x}px`,
  top: `${y}px`,
});

Floating UI →
Floating UI Source (GitHub) →

~

☝️ Did you know some folks from Microsoft are thinking about a proposal to allow Anchored Positioning using only CSS? It’s still a very early discussion, so nothing official yet …

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.