@floating-ui/dom

What is @floating-ui/dom?

The @floating-ui/dom package is a library for creating floating elements that can be positioned next to a reference element on the DOM, such as tooltips, popovers, dropdowns, and more. It provides low-level primitives for positioning and updating the placement of these elements in relation to their reference elements and the viewport.

What are @floating-ui/dom's main functionalities?

Positioning

This feature allows you to compute the position of a floating element relative to a reference element. The computePosition function returns a promise that resolves with the coordinates where the floating element should be placed.

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

const referenceElement = document.querySelector('#reference');
const floatingElement = document.querySelector('#floating');

computePosition(referenceElement, floatingElement).then(({x, y}) => {
  Object.assign(floatingElement.style, {
    left: `${x}px`,
    top: `${y}px`,
    position: 'absolute',
  });
});

Auto-Placement

Auto-placement automatically adjusts the placement of the floating element to ensure it stays in view within the viewport or a specified boundary. It can flip or shift the element as needed.

import {autoPlacement} from '@floating-ui/dom';

const referenceElement = document.querySelector('#reference');
const floatingElement = document.querySelector('#floating');

autoPlacement(referenceElement, floatingElement, {
  placement: 'bottom',
  middleware: [{name: 'flip', options: {padding: 8}}]
}).then(placement => {
  // Apply the placement to the floating element
});

Middleware

Middleware allows for advanced positioning behavior by adding additional logic during the position computation. Examples include 'shift' to keep the floating element within view and 'flip' to flip the element to the opposite side of the reference element if it would overflow the viewport.

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

const referenceElement = document.querySelector('#reference');
const floatingElement = document.querySelector('#floating');

computePosition(referenceElement, floatingElement, {
  middleware: [shift(), flip()]
}).then(({x, y, middlewareData}) => {
  // Use the x, y coordinates and middleware data to position the floating element
});

Other packages similar to @floating-ui/dom

popper.js

Popper.js is a predecessor of the @floating-ui/dom library. It provides similar functionality for positioning tooltips and popovers. While Popper.js is widely used and has a larger community, @floating-ui/dom is its successor with a more modular architecture and potentially better performance.

tippy.js

Tippy.js is a highly popular tooltip and popover library built on top of Popper.js. It offers a more complete solution out of the box with a wide range of options and plugins for creating interactive floating UI elements. Compared to @floating-ui/dom, Tippy.js might be easier to use for those who want a ready-to-go solution with less setup.

tooltip.js

Tooltip.js is another library for creating tooltips in web applications. It is part of the Bootstrap framework but can be used independently. While it provides a simple API for tooltips, @floating-ui/dom offers a lower-level API that can be used to build a wider variety of floating UI elements.

README

@floating-ui/dom

This is the library to use Floating UI on the web, wrapping @floating-ui/core with DOM interface logic.