Custom Popover Bubble Width The popover bubble width is set to 250px by default, but it can be customized per use case by defining the --c-bolt-popover-bubble-width CSS custom property via inline style. Important Notes: It is recommended to always use the CSS function min() when customizing the popover bubble width. This ensures the width will never break page layouts. The following example uses min(80vw, 500px), which means the width is set to 500px unless the browser width is smaller than 500px, then the width will become 80% of the browser width. Keep in mind that the min() function is not supported in Microsoft Edge 42 and older. If you need to support such old browser, you should set the custom width to a plain old absolute value such as 500px. Demo

This Is an Eyebrow

This Is a Headline

This is a paragraph.
Twig
{% include '@bolt-components-popover/popover.twig' with {
  trigger: trigger,
  content: content,
  attributes: {
    style: '--c-bolt-popover-bubble-width: min(80vw, 500px);'
  },
} only %}
HTML
<bolt-popover style="--c-bolt-popover-bubble-width: min(80vw, 500px);">
  <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>