Popper.js Offset

offset 修饰符让你从它的引用元素中置换一个 popper 元素。

如果您需要在它们之间应用一些边距，或者如果您需要根据某些自定义逻辑微调位置，这会很有用。

演示

Skidding （滑行的距离）

[20, 0]：tooltips 沿参考偏移 20px。

Distance（距离）

[0, 20]：tooltips距离参考基准的距离是20px

阶段（Phase）

main

Options

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

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

offset

这个offset的值是有两个数字的数组，形式： [skidding, distance]

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

Skidding

第一个数字是skidding，是使tooltips 沿着参考元素移动的距离值。

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

Distance

第二个数字是distance（距离）：将tooltips从参考元素放置的方向移开或移向参考元的距离。一个正数将它移得更远，而一个负数将使它与参考重叠。

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

该option选项还可以接受一个带有一些参数的函数，让您可以访问popper placement、引用和popper rect。如下：

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

注意：在上面的例子中，只有当popper位于参考元素之下时，我们才应用popper高度的一半作为两个元素之间的边界。