Home
Popover
The Popover component wraps a trigger element and a wc-popover-content child. It uses
floating-ui to compute position, keeping the panel visible inside the viewport even on scroll.
Usage
<wc-popover trigger="click">
<wc-button>Open popover</wc-button>
<wc-popover-content>
<div style="display:flex;flex-direction:column;gap:0.75rem;">
<wc-input label="Name"></wc-input>
<wc-input label="Email"></wc-input>
<wc-button>Submit</wc-button>
</div>
</wc-popover-content>
</wc-popover>
Placements
The popover can be positioned relative to the trigger element. Accepted values for placement include:
top, top-start, top-end,
right, right-start, right-end,
bottom (default), bottom-start, bottom-end,
left, left-start, and left-end.
floating-ui automatically flips or shifts the panel to keep it visible inside the viewport.
<wc-popover trigger="click" placement="top">
<wc-button variant="outlined">top</wc-button>
<wc-popover-content>Placed on top</wc-popover-content>
</wc-popover>
<wc-popover trigger="click" placement="bottom">
<wc-button variant="outlined">bottom</wc-button>
<wc-popover-content>Placed on bottom</wc-popover-content>
</wc-popover>
<wc-popover trigger="click" placement="left">
<wc-button variant="outlined">left</wc-button>
<wc-popover-content>Placed on left</wc-popover-content>
</wc-popover>
<wc-popover trigger="click" placement="right">
<wc-button variant="outlined">right</wc-button>
<wc-popover-content>Placed on right</wc-popover-content>
</wc-popover>
Trigger
The trigger attribute controls how the popover opens.
Use click to toggle on click, hover to open on mouse-over,
or manual to drive visibility programmatically via the open attribute
or show() / hide() methods.
<wc-popover trigger="hover">
<wc-button variant="tonal">hover</wc-button>
<wc-popover-content>Opens on hover</wc-popover-content>
</wc-popover>
<wc-popover trigger="click">
<wc-button variant="tonal">click</wc-button>
<wc-popover-content>Opens on click</wc-popover-content>
</wc-popover>
<wc-popover trigger="manual" open="true">
<wc-button variant="tonal">manual (open)</wc-button>
<wc-popover-content>Manually controlled</wc-popover-content>
</wc-popover>
On this page
Usage Placements Trigger