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]).
.js-bolt-popover-boundary class and the popover’s boundary prop is set to said class. The popover’s auto placement will always appear within the container.boundary prop and always render the placement stated. This feature will cause undesired overflow issues in smaller screens, use with caution.{% 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>