placement
prop. It can be set to a specific placement or automatically calculated. It is recommended to use the boundary
prop in tandem with auto placement. This ensures that the auto placement will happen within a specific container instead of the entire page. The boundary
prop accepts all selector names (eg: .class, #id, and [attribute]).
{% include '@bolt-components-popover/popover.twig' with {
trigger: trigger,
content: content,
placement: 'auto',
boundary: '.js-target-container'
} only %}
<bolt-popover placement="auto" boundary=".js-target-container">
<button type="button" class="e-bolt-button">
This triggers a popover
</button>
<div slot="content">
This is the content of the popover.
</div>
</bolt-popover>