<div class="popover-container">
<button class="button" data-popover="popover1" id="js-popover">Click me to open popover</button>
<div class="popover" id="popover1">
<div class="popover-header">Popover Title</div>
<div class="popover-body">And heres some amazing content. Its very engaging. Right?</div>
<div class="popover-header">Another title</div>
<div class="popover-body">
And heres some more amazing content. Its very engaging. Right?
<a href="#" class="button button-small button-primary">Action Button</a>
</div>
</div>
</div>You will need to use JavaScript to open and close popover
const popoverTriggerElement = document.getElementById('js-popover');
popoverTriggerElement.addEventListener('click', () => {
const popoverElement = document.getElementById(popoverTriggerElement.dataset.popover);
popoverElement.classList.toggle('active');
});--r-popover-background: var(--r-color-dark);
--r-popover-color: var(--r-global-font-color);
--r-popover-border-color: var(--r-color-dark-lighten-10);