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.

Floating

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: undefinedundefined

This is the arrow element to be positioned.

arrow({
  element: document.querySelector('#arrow'),
});

arrow({
  element: document.querySelector('#arrow'),
});

padding

default: 00

This describes the padding between the arrow and the edges of the floating element. If your floating element has border-radiusborder-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
});

Deriving options from state

You can derive the options from the middleware lifecycle state:

arrow((state) => ({
  padding: state.rects.reference.width,
}));

arrow((state) => ({
  padding: state.rects.reference.width,
}));

Data

The following data is available in middlewareData.arrowmiddlewareData.arrow:

interface Data {
  x?: number;
  y?: number;
  centerOffset: number;
}

interface Data {
  x?: number;
  y?: number;
  centerOffset: number;
}

You can hide the arrow if it can’t stay centered to the reference, i.e. centerOffset !== 0centerOffset !== 0.
You can interpolate the shape of the arrow (e.g. skew it) so it stays centered as best as possible.