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) →

~