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.