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.
This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
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.
This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action .
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>