Arrow

The arrow modifier positions an inner element of the popper so it appears centered relative to the reference element, usually the triangle or caret that points toward the reference element.

Don't mind tech-related ads? Consider disabling your ad-blocker to help us!
They are small and unobtrusive.
Alternatively, support us on Open Collective!

Demo

The arrow points toward the center of the reference at all times and transitions away once it can no longer point to the center.

Reference

Phase

main

Options

type Options = {
  element: HTMLElement | string, // "[data-popper-arrow]"
  padding: Padding | PaddingFunction, // 0
};

type PaddingFunction = ({
  popper: Rect,
  reference: Rect,
  placement: Placement,
}) => Padding;

type Padding =
  | number
  | {|
      top?: number,
      left?: number,
      right?: number,
      bottom?: number,
    |};

`element`

Specifies the element to position as the arrow. This element must be a child of the popper element.

A string represents a CSS selector queried within the context of the popper element.

Popper will automatically pick up the following element (using the data-popper-arrow attribute) and position it:

<div id="popper">
  <div data-popper-arrow></div>
</div>

Or you can pass an element without an attribute:

const arrow = document.querySelector('#arrow');
createPopper(reference, popper, {
  modifiers: [
    {
      name: 'arrow',
      options: {
        element: arrow,
      },
    },
  ],
});

`padding`

If you don't want the arrow to reach the very edge of the popper (this is common if your popper has rounded corners using border-radius), you can apply some padding to it.

You can pass a number, which will be equal padding on all four sides, or an object containing side properties each with their own padding value.

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'arrow',
      options: {
        padding: 5, // 5px from the edges of the popper
      },
    },
  ],
});

The padding option also accepts a function as value, the function provides the popper and reference rects, and placement as arguments and should return a valid Padding type.

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'arrow',
      options: {
        padding: ({ popper, reference, placement }) =>
          popper.width / reference.width,
      },
    },
  ],
});

Data

type Data = {
  // Describes the offset of the arrow
  x?: number,
  y?: number,
  // Describes the offset of the arrow (where it actually is) relative to where
  // it should be if it were allowed to overflow its popper. Non-zero once the
  // arrow reaches the edge of its popper and cannot overflow it to be centered
  // to the reference.
  centerOffset: number,
};

If you would like to hide the arrow once it reaches the edge of its popper (i.e. once it can no longer point to the center of the reference element), you can create a custom modifier:

const applyArrowHide = {
  name: 'applyArrowHide',
  enabled: true,
  phase: 'write',
  fn({ state }) {
    const { arrow } = state.elements;

    if (arrow) {
      if (state.modifiersData.arrow.centerOffset !== 0) {
        arrow.setAttribute('data-hide', '');
      } else {
        arrow.removeAttribute('data-hide');
      }
    }
  },
};

.arrow[data-hide] {
  visibility: hidden;
}

Edit this page

Prevent Overflow

Flip