popper.js - 如何给 popper.js 弹出框边距/填充，使其不会粘在窗口边框上

Question

我想给一个弹出框(工具提示)一个填充窗口。所以它对窗框有一个偏移量，而不是 stick at the edges

我试图通过添加 padding/ margin/ transparent border 来实现这一点到弹出框。但是所有这些方法都有一个缺点，即箭头被边距/填充所抵消:https://jsfiddle.net/hq3tLf9k/ arrow being pushed down by 20px

以下方法是有一个内部 div 有这个 padding/ margin应用并保持父框不变:https://jsfiddle.net/dz2ayntf/

这适用于箭头的定位，但我也想使用 css transition: transform, transform: translate(0, 10px) 在弹出框(滑入)中进行动画处理.此过渡应适用于方框和箭头。 transfom: translate不幸的是，创建了一个相对位置上下文，并且箭头的位置被边距偏移了。 https://jsfiddle.net/dz2ayntf/1/

所以回到最初的问题:

如何让弹出框不粘在浏览器窗口边缘，(填充)

转换:在包含箭头

的框上进行转换

Answer 1

找到了解决方案:

popper.js 修饰符 preventOverflow接受一个对象，您可以在其中传递选项宽度填充，这将是此处到“溢出元素”的距离，即视口(viewport)

api 文档:https://popper.js.org/docs/v2/modifiers/prevent-overflow/#padding

https://jsfiddle.net/ynbad02x/

  var state = Popper.createPopper(reference, popper, {
    placement: 'right',
    modifiers: [{

      name: 'preventOverflow',
        options: {
        altAxis: true,
        padding: 40
      },
     }] 
  });

the popover box has 40px padding to the edge, while scrolling