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.
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.
Twig
Twig
{% include '@bolt-components-popover/popover.twig' with {
  trigger: trigger,
  content: content,
  placement: 'auto',
  boundary: '.js-target-container'
} only %}
HTML
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>