Offset

The offset modifier lets you displace a popper element from its reference element.

This can be useful if you need to apply some margin between them or if you need to fine tune the position according to some custom logic.

Demo

Skidding

[20, 0]: The popper is offset 20px along the reference.

Distance

[0, 20]: The popper is offset 20px away from the reference.

Phase

main

Options

type Options = {
  offset: OffsetsFunction | [?number, ?number], // [0, 0]
};

type OffsetsFunction = ({
  popper: Rect,
  reference: Rect,
  placement: Placement,
}) => [?number, ?number];

offset

The basic offset accepts an array with two numbers in the form [skidding, distance].

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [10, 20],
      },
    },
  ],
});

Skidding

The first number, skidding, displaces the popper along the reference element.

           POP
 |----------| <- [10, 0]
REF

Distance

The second number, distance, displaces the popper away from, or toward, the reference element in the direction of its placement. A positive number displaces it further away, while a negative number lets it overlap the reference.

POP
 |
 | <- [0, 10]
 |
REF

The option can also take a function provided with some arguments, giving you access to the popper placement, and the reference and popper rects.

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: ({ placement, reference, popper }) => {
          if (placement === 'bottom') {
            return [0, popper.height / 2];
          } else {
            return [];
          }
        },
      },
    },
  ],
});

In the above example, we are applying half the popper's height as margin between the two elements only when the popper is positioned below its reference element.