arrow
Provides data to position an inner element of the floating element (usually a triangle or caret) so that it appears centered to the reference element.
This is useful to add an additional visual cue to the floating element about which element it is referring to.
Usage
The layout box of the arrow element should be a square with equal width and height. Inner or pseudo-elements may have a different aspect ratio.
Given an arrow element inside your floating element:
<div id="tooltip">
Tooltip text
<div id="arrow"></div>
</div>
<div id="tooltip">
Tooltip text
<div id="arrow"></div>
</div>
#arrow {
position: absolute;
}
#arrow {
position: absolute;
}
Pass it to the arrow()
arrow()
middleware and assign the dynamic
styles:
import {computePosition, arrow} from '@floating-ui/dom';
const arrowEl = document.querySelector('#arrow');
computePosition(referenceEl, floatingEl, {
middleware: [
arrow({
element: arrowEl,
}),
],
}).then(({middlewareData}) => {
if (middlewareData.arrow) {
const {x, y} = middlewareData.arrow;
Object.assign(arrowEl.style, {
left: x != null ? `${x}px` : '',
top: y != null ? `${y}px` : '',
});
}
});
import {computePosition, arrow} from '@floating-ui/dom';
const arrowEl = document.querySelector('#arrow');
computePosition(referenceEl, floatingEl, {
middleware: [
arrow({
element: arrowEl,
}),
],
}).then(({middlewareData}) => {
if (middlewareData.arrow) {
const {x, y} = middlewareData.arrow;
Object.assign(arrowEl.style, {
left: x != null ? `${x}px` : '',
top: y != null ? `${y}px` : '',
});
}
});
This middleware is designed only to position the arrow on one
axis (x
for 'top'
'top'
or 'bottom'
'bottom'
placements). The
other axis is considered “static”, which means it does not need
to be positioned dynamically.
You may however want to position both axes statically in the following scenario:
- The reference element is either wider or taller than the floating element;
- The floating element is using an edge alignment
(
-start
-start
or-end
-end
placement).
Visualization
To help you understand how this middleware works, here is a visualization tutorial on CodeSandbox.
Order
arrow()
arrow()
should generally be placed toward the end of your
middleware array, after shift()
shift()
(if used).
Placement
To know which side the floating element is actually placed at for the static axis offset of the arrow, the placement is returned:
computePosition(referenceEl, floatingEl, {
placement: 'top',
middleware: [flip(), arrow({element: arrowEl})],
}).then((data) => {
// The final placement can be 'bottom' or 'top'
const placement = data.placement;
});
computePosition(referenceEl, floatingEl, {
placement: 'top',
middleware: [flip(), arrow({element: arrowEl})],
}).then((data) => {
// The final placement can be 'bottom' or 'top'
const placement = data.placement;
});
React
// The final placement can be 'bottom' or 'top'
const {placement} = useFloating({
placement: 'top',
middleware: [flip(), arrow({element: arrowEl})],
});
// The final placement can be 'bottom' or 'top'
const {placement} = useFloating({
placement: 'top',
middleware: [flip(), arrow({element: arrowEl})],
});
Options
These are the options you can pass to arrow()
arrow()
.
interface Options {
element: Element;
padding?: Padding;
}
interface Options {
element: Element;
padding?: Padding;
}
element
default: undefined
undefined
This is the arrow element to be positioned.
arrow({
element: document.querySelector('#arrow'),
});
arrow({
element: document.querySelector('#arrow'),
});
padding
default: 0
0
This describes the padding between the arrow and the edges of the
floating element. If your floating element has
border-radius
border-radius
, this will prevent it from
overflowing the corners.
arrow({
element: document.querySelector('#arrow'),
padding: 5, // stop 5px from the edges of the floating element
});
arrow({
element: document.querySelector('#arrow'),
padding: 5, // stop 5px from the edges of the floating element
});
Data
The following data is available in middlewareData.arrow
middlewareData.arrow
:
interface Data {
x?: number;
y?: number;
centerOffset: number;
}
interface Data {
x?: number;
y?: number;
centerOffset: number;
}
x
This property exists if the arrow should be offset on the x-axis.
y
This property exists if the arrow should be offset on the y-axis.
centerOffset
This property describes where the arrow actually is relative to where it could be if it were allowed to overflow the floating element in order to stay centered to the reference element.
This enables two useful things:
- You can hide the arrow if it can’t stay centered to the
reference, i.e.
centerOffset !== 0
centerOffset !== 0
. - You can interpolate the shape of the arrow (e.g. skew it) so it stays centered as best as possible.