<!-- Default -->
<div class="fw-container">
<!-- Popover -->
<button class="button-bordered
" popovertarget="popover-1">
<span class="button-bordered__inner"> <span class="button-bordered__label">Toggle Popover</span>
</span>
</button>
<div class="popover" id="popover-1" popover="auto" data-js-popover>
<div class="popover__content typography">
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
</div>
</div>
<!-- END: Popover -->
</div>
<!-- Hover -->
<div class="fw-container">
<!-- Popover -->
<button class="button-bordered
" popovertarget="popover-5">
<span class="button-bordered__inner"> <span class="button-bordered__label">Hover or Click</span>
</span>
</button>
<div class="popover" id="popover-5" popover="auto" data-js-popover='{"hover":true}'>
<div class="popover__content typography">
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
</div>
</div>
<!-- END: Popover -->
</div>
<!-- With Deep Link -->
<div class="fw-container">
<!-- Popover -->
<button class="button-bordered
" popovertarget="demo-popover">
<span class="button-bordered__inner"> <span class="button-bordered__label">Toggle Popover (Deep Linked)</span>
</span>
</button>
<div class="popover" id="demo-popover" popover="auto" data-js-popover='{"deeplink":true}'>
<div class="popover__content typography">
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
</div>
</div>
<!-- END: Popover -->
</div>
{% set id = id|default(uniqid('popover')) %}
<div class="fw-container">
<!-- Popover -->
{% include '@partial-button' with {
classes: {
base: 'button-bordered'
},
attributes: {
'popovertarget': id,
},
title: trigger_label|default('Toggle Popover')
} only %}
<div
class="popover"
id="{{ id }}"
popover="auto"
data-js-popover{% if settings is not empty %}='{{ settings|json_encode }}'{% endif %}
>
<div class="popover__content typography">
{{ content|default('')|raw }}
</div>
</div>
<!-- END: Popover -->
</div>
No notes defined.