So, using Bootstrap 4, I have a navigation bar that is set to .sticky-top. There's a button that calls a popover, which works great until the page is scrolled a little, then the top part of the popover content gets hidden.
This wouldn't be too bad if it only happened upon scrolling. The real issue is that if the popover is opened AFTER scrolling, the contents are still hidden.
Here's a Fiddle showing the problem:
https://jsfiddle.net/vfpb7r2d/16/
And the most relevant bit of code:
<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>
Is there any way to fix this?
Add data-boundary="viewport" to the popover element.
<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>