我想给一个弹出框(工具提示)一个填充窗口。所以它对窗框有一个偏移量,而不是 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
接受一个对象,您可以在其中传递选项宽度填充,这将是此处到“溢出元素”的距离,即视口(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
关于popper.js - 如何给 popper.js 弹出框边距/填充,使其不会粘在窗口边框上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60153404/