Popover Placement and Boundary Adjust the placement of the content by using the 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]). Demo Auto placement with a boundary (recommended): The following container has the .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.

Auto

Auto

Auto

Auto

Specific placement: When setting a specific placement, it will ignore the boundary prop and always render the placement stated. This feature will cause undesired overflow issues in smaller screens, use with caution. bottom-start bottom bottom-end

left-start

left

left-end

top-start top top-end right-start right right-end

Twig

{% include '@bolt-components-popover/popover.twig' with { trigger: trigger, content: content, placement: 'auto', boundary: '.js-target-container' } only %}

HTML

<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>