import Layout from '../../lib/components/Layout';
export default Layout;

# arrow

The `arrow{:.function}` middleware provides data to position an
inner element of the floating element (usually a triangle or
caret) so that it is centered to the reference element.

If you're using an aligned placement, like `'top-start'{:js}` or
`'right-end'{:js}`, you may not need to use this middleware if
you want the arrow's position to remain "static".

## Usage

Given an arrow element inside your floating element (with
`position: absolute{:sass}` applied in its CSS):

```html
<div id="tooltip">
  Tooltip text
  <div id="arrow"></div>
</div>
```

Pass it to the `arrow{:.function}` middleware and assign the
dynamic styles:

```js
import {computePosition, arrow} from '@floating-ui/dom';

const arrowEl = document.querySelector('#arrow');

computePosition(referenceEl, floatingEl, {
  middleware: [
    arrow({
      element: arrowEl,
    }),
  ],
}).then(({middlewareData}) => {
  const {x, y} = middlewareData.arrow;

  Object.assign(arrowEl.style, {
    left: x != null ? `${x}px` : '',
    top: y != null ? `${y}px` : '',
  });
});
```

> Don't forget the `null` check! `x` and `y` can be `0` :-)

This middleware is designed only to position the arrow on one
axis (`x` for `'top'{:js}` or `'bottom'{:js}` placements). The
other axis is considered "static", which means it does not need
to be positioned dynamically.
[You can see a full styling example in the tutorial](/docs/tutorial#arrow-middleware).

## Order

`arrow{:.function}` should generally be placed toward the end of
your middleware array, after `shift{:.function}` (if used).

## Options

```ts
type Options = {
  element: HTMLElement;
  padding: Padding;
};
```

### element

This is the arrow element to be positioned.

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

### padding

```ts
type Padding = number | SideObject;
```

This describes the padding between the arrow and the edges of the
floating element. If your floating element has
`border-radius{:.function}`, this will prevent it from
overflowing the corners.

```js
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{:js}`:

```ts
type 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{:js}`.
- You can interpolate the shape of the arrow (e.g. skew it) so it
  stays centered as best as possible.
