@floating-ui/core

What is @floating-ui/core?

The @floating-ui/core package is a low-level toolkit for creating floating elements on a web page, such as tooltips, popovers, dropdowns, and more. It provides the logic to position these elements in relation to a reference element, handling edge cases like viewport overflow and updates on scroll or resize.

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

Positioning floating elements

This feature allows you to position a floating element (like a tooltip or a dropdown) relative to a reference element on the page. The `computePosition` function calculates the best position based on the specified placement, such as 'bottom', and returns coordinates to position the floating element.

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

async function positionElement(referenceElement, floatingElement) {
  const {x, y} = await computePosition(referenceElement, floatingElement, {
    placement: 'bottom'
  });
  Object.assign(floatingElement.style, {
    left: `${x}px`,
    top: `${y}px`,
  });
}

Auto-placement

Auto-placement automatically chooses the best placement for a floating element when the preferred placement is not available. This is useful for dynamically positioned UI elements that need to adapt to different screen sizes or content changes.

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

async function positionWithAutoPlacement(referenceElement, floatingElement) {
  const {x, y, placement} = await computePosition(referenceElement, floatingElement, {
    placement: 'bottom',
    middleware: [autoPlacement()]
  });
  console.log('Chosen placement:', placement);
  Object.assign(floatingElement.style, {
    left: `${x}px`,
    top: `${y}px`,
  });
}

Detecting overflow

This feature allows you to detect if a floating element is overflowing its boundary (e.g., the viewport or a specific container). It's useful for adjusting the positioning or appearance of elements to prevent them from being partially hidden.

import {detectOverflow} from '@floating-ui/core';

async function checkOverflow(referenceElement, floatingElement) {
  const overflow = await detectOverflow(referenceElement, {
    boundary: document.body
  });
  console.log('Overflow values:', overflow);
}

Other packages similar to @floating-ui/core

popper.js

Popper.js is a predecessor to @floating-ui/core and offers similar functionality for positioning floating elements. While Popper.js is widely used and has a large community, @floating-ui/core is its successor, designed to be more modular and lightweight.

tippy.js

Tippy.js is a tooltip and popover library that builds on top of Popper.js. It provides a higher-level abstraction for creating and managing tooltips, popovers, and dropdowns. Compared to @floating-ui/core, Tippy.js offers more out-of-the-box features for interaction and styling but is less flexible for low-level positioning needs.

README

@floating-ui/core

This is the platform-agnostic core of Floating UI, exposing the main computePosition function but no platform interface logic.