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

Posted 2023-01-27

我想给弹出框（工具提示）添加一个窗口填充。因此它与窗口框架有偏移，并且没有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/

回到原始问题：

• 如何使弹出框不粘在浏览器窗口的边缘，（填充）
• 转换：在包含箭头的框上进行翻译

答案

找到解决方案：

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

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