Components
Popover
The .quanta-popover is a floating panel that appears on hover or click. You wrap your trigger in a .quanta-popover-wrapper and point it to the popover by data-popover-target. By default it is hidden (data-show="false") until user interaction.
HTML Structure
Basic markup for a popover:
<div class="quanta-popover-wrapper">
<button
class="quanta-btn quanta-btn-primary"
data-popover-target="myPopover">
Click or hover me
</button>
<div
id="myPopover"
class="quanta-popover quanta-popover-top"
data-show="false">
Your popover content goes here.
</div>
</div>
This popover is hidden by default and will appear on hover/click.
Placements
Choose one of .quanta-popover-top, -bottom, -left or -right to position the panel.
Popover on top
Popover below
Popover to the left
Popover to the right
Visual Variants
Add one of .soft, .bold or .blur on your .quanta-popover for different shadow or backdrop styles.
Soft shadow
Bold shadow
Blurred backdrop
JavaScript
Include the provided setupPopoverTriggers() script on your page. It will auto‑bind all elements with data-popover-target and manage the data-show attribute on hover and click.