@floating-ui/core

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);
}