Popover placement issue when container has scroll

[tochoromero]

There is a problem when you have a popover, or tooltip or dropdown on a div container that has a scrollbar. When there is a scrollbar the popover is limited to the container boundaries and cannot be positioned correctly. If the scrollbar is removed the popover works as expected.

Here is a jsfiddle demonstrating the problem: https://jsfiddle.net/tochoromero/xxd8uLmf/

Now this is a problem with popper.js, here is a reference:
floating-ui/floating-ui#248

It seems the problem is with the preventOverflow Popper setting. I guess we cannot change that property to something else by default, but we should have a way to provide our own values to workaround this issue.

Thank you.

[jacobmllr95]

The popover docs are missing a proper explanation of the boundary property, but the dropdown docs have a quit good one: https://bootstrap-vue.js.org/docs/components/dropdown/#boundary-constraint

Setting the boundary option to viewport fixes the problem.
Your directive looks then like this: v-b-popover.hover.right.viewport="'I am popover content!'"

See: https://bootstrap-vue.js.org/docs/directives/popover/#directive-syntax-and-usage

@tochoromero Maybe you could create a PR to add the boundary constraint to the popover docs?

[tochoromero]

the viewport option did it, thank you.
I will get some time to do the PR.