Popper Logo
Popper Logo

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.

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

Demo

Skidding

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

Reference
Tooltip

Distance

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

Reference
Tooltip

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.

Edit this page
Popper Offsets
© 2020 MIT License