Skip to content

computePosition

The computePosition() function returns the x and y coordinates to place a floating element next to a given reference element.

Together with autoUpdate, the floating element remains “anchored” to the 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

Where to place the floating element relative to its reference element. 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
});

Apply position: fixed to your floating element (instead of position: absolute) prior to the computePosition() call.

The 'fixed' strategy is useful in two ways:

  • Reduces "jumpiness" caused by needing to reposition the floating element continually while scrolling if the reference element is fixed.
  • Breaks the floating element out of a clipping container (make it top-layer on the UI) more frequently than 'absolute' will.

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.

Back
Tutorial
Next
Middleware