Basic Popover Popover usually contains a small piece of structured content that may have calls to action. For rendering more complex layouts, please consider using the modal component instead. As for simple text or phrases, please consider using the tooltip component. Demo This is the content of the popover with a call to action .
{% set trigger %} {% include '@bolt-components-button/button.twig' with { text: 'This triggers a popover', } only %} {% endset %} {% include '@bolt-components-popover/popover.twig' with { trigger: trigger, content: 'This is the content of the popover.', } only %}
<bolt-popover spacing="medium"> <bolt-button> This triggers a popover </bolt-button> <div slot="content"> This is the content of the popover. </div> </bolt-popover>