Popover

{% component "Popover" title="Popover title" content="And here's some amazing content. It's very engaging. Right?" placement="top" %}
                {% component "Button" variant="danger" size="lg" %}Click to toggle popover{% endcomponent %}
            {% endcomponent %}

{% component "Popover" title="Top popover" content="Popover content on top" placement="top" %}
                {% component "Button" variant="secondary" attrs:data-bs-container="body" %}Popover on top{% endcomponent %}
            {% endcomponent %}

{% component "Popover" title="Right popover" content="Popover content on right" placement="right" %}
                {% component "Button" variant="secondary" attrs:data-bs-container="body" %}Popover on right{% endcomponent %}
            {% endcomponent %}

{% component "Popover" title="Bottom popover" content="Popover content on bottom" placement="bottom" %}
                {% component "Button" variant="secondary" attrs:data-bs-container="body" %}Popover on bottom{% endcomponent %}
            {% endcomponent %}

{% component "Popover" title="Left popover" content="Popover content on left" placement="left" %}
                {% component "Button" variant="secondary" attrs:data-bs-container="body" %}Popover on left{% endcomponent %}
            {% endcomponent %}

{% component "Popover" title="Custom popover" content="This popover is themed via CSS variables." placement="right" attrs:data-bs-custom-class="custom-popover" %}
                {% component "Button" variant="secondary" %}Custom popover{% endcomponent %}
            {% endcomponent %}

{% component "Popover" title="Dismissible popover" content="And here's some amazing content. It's very engaging. Right?" placement="top" trigger="focus" %}
                <a tabindex="0" class="btn btn-lg btn-danger" role="button">Dismissible popover</a>
            {% endcomponent %}

{% component "Popover" title="Disabled popover" content="Popover on disabled button" placement="top" trigger="hover" %}
                <span class="d-inline-block" tabindex="0">
                    {% component "Button" variant="primary" type="button" disabled=True %}Disabled button{% endcomponent %}
                </span>
            {% endcomponent %}