computePosition

The computePosition() function provides anchored positioning by computing the necessary positioning coordinates to position the floating element next to a given reference element.

Usage

With two elements on the document like so:

<button id="button">My button</button>
<div id="tooltip">My tooltip</div>

Call computePosition() with these elements as arguments:

import {computePosition} from '@floating-ui/dom';
 
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
 
computePosition(button, tooltip).then(({x, y}) => {
  // Do things with `x` and `y`
});

Since a promise is returned, we can chain the .then() method which will resolve with the data necessary to position the tooltip next to the button.

x and y represent the positioning coordinates of the floating element relative to its offsetParent such that it will be positioned on the 'bottom' center (by default) of the reference element.

The recommended way to position the tooltip is to use Object.assign() on the style object:

import {computePosition} from '@floating-ui/dom';
 
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
 
// Can be done in your CSS
Object.assign(tooltip.style, {
  position: 'absolute',
});
 
computePosition(button, tooltip).then(({x, y}) => {
  Object.assign(tooltip.style, {
    left: `${x}px`,
    top: `${y}px`,
  });
});

Your floating element must have position: absolute already applied before computePosition() is called, so that its dimensions are read correctly.

Options

Passed as a third argument, this is the object to configure the behavior.

computePosition(referenceEl, floatingEl, {
  // options
});

placement

This is the core positioning placement. 12 strings are available:

type Placement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'right'
  | 'right-start'
  | 'right-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end';

computePosition(referenceEl, floatingEl, {
  placement: 'bottom-start', // 'bottom' by default
});

The -start and -end alignments are logical and will adapt to the writing direction (e.g. RTL) as expected.

strategy

This is the type of CSS position property to use. Two strings are available:

type Strategy = 'absolute' | 'fixed';

computePosition(referenceEl, floatingEl, {
  strategy: 'fixed', // 'absolute' by default
});

Instead of applying position: absolute in your CSS before the computePosition() call, you'll now apply position: fixed.

You will want to use 'fixed' if your reference element is inside a fixed container, but your floating element not.

middleware

Middleware alter the base placement in some fashion, or provide useful data to the consumer. 8 core middleware are included in the package, which should cover almost all use cases:

• offset()
• shift()
• flip()
• arrow()
• size()
• autoPlacement()
• hide()
• inline()

These are documented in the navigation bar on the left. Importantly, you can also craft your own custom middleware to extend the behavior of the library.

Return value

type ComputePositionReturn = {
  x: number;
  y: number;
  // The stateful placement, which can be different
  // from the initial `placement` passed as options
  placement: Placement;
  strategy: Strategy;
  middlewareData: MiddlewareData;
};

Updating

Since computePosition() is only a single function call, it only positions your element once. To ensure the floating element remains anchored to the reference element in a variety of scenarios, use the autoUpdate utility.