Popover
Rich contextual popup with title, content, and arrow, positioned and auto-flipped via Floating UI.
Click-triggered, rich content
Click the button to open. Click anywhere outside the panel — or the button again — to close it. Position, flip, and the arrow offset are all calculated by Floating UI at runtime, not fixed CSS, so the panel stays correctly placed even if you resize.
Q3 rollout
Currently in staged rollout to 40% of traffic. Full rollout expected by end of week.
<div x-data="popoverDemo({ trigger: 'click', placement: 'bottom' })" x-init="init()">
<button x-ref="trigger" @click="toggle()">Project status</button>
<div class="sc-popover" x-ref="panel" x-show="open" @click.outside="onClickOutside()">
<div class="sc-popover-arrow"></div>
<img class="sc-popover-thumb" src="...">
<p class="sc-popover-title">Q3 rollout</p>
<div class="sc-popover-body">...</div>
</div>
</div>Hover-triggered
Opens on hover instead of click — useful for lightweight, glanceable info that doesn't need to stay open while the visitor interacts with the page elsewhere.
Form inside popover
For a single-field edit, a popover with its own form avoids a full-page navigation or a heavier modal dialog.
Auto-flip on edge
Requested placement is right, but the trigger sits
flush against the edge of the preview frame — Floating UI's
flip() middleware detects the overflow and switches
the panel to the opposite side automatically.