弹出框滚动，某些内容在 .sticky-top 元素中调用时被隐藏

Question

所以，使用Bootstrap 4，我有一个设置为.sticky-top的导航栏。有一个按钮可以调用弹出框，在页面滚动一点之前效果很好，然后弹出框内容的顶部被隐藏。

如果它只发生在滚动时，这不会太糟糕。真正的问题是，如果在滚动后打开弹出窗口，内容仍然被隐藏。

这是一个显示问题的小提琴：

https://jsfiddle.net/vfpb7r2d/16/

以及最相关的代码：

<div class="sticky-top bg-dark p-2">
    <div class="btn btn-primary" data-toggle="popover" title="More information..." data-content="Isn't there a way to keep the whole popover visible??? The longer the popover content becomes, the more of the content disappears with scrolling. (There does seem to be a maximum cutoff point, but I haven't tried to measure what it is.)" />Button</div>
</div>

有什么办法可以解决这个问题吗？

Answer 1

将data-boundary="viewport"添加到弹出框元素。

  <div class="btn btn-primary" data-toggle="popover" data-boundary="viewport" title="More information..." data-content="Isn't there a way to keep the whole popover visible?">Button</div>

https://jsfiddle.net/vfpb7r2d/22/