Components
Popover
An anchored popover panel built on the native Popover API and CSS anchor positioning.
UiPopover renders a floating panel using the browser's native Popover API (the popover attribute) positioned with CSS anchor positioning. A trigger toggles it by id, and the popover anchors to any element that declares a matching anchor-name.
For a ready-made user/account dropdown with a header and item list, use Popover Menu instead.
Add a popover
The trigger targets the popover by id (popovertarget) and declares the anchor (anchor-name); the popover positions against it via its anchor-name prop.
<template>
<!-- Trigger: toggles the popover and acts as its anchor -->
<UiButton
text="Open"
popovertarget="profile-popover"
style="anchor-name: --profile"
/>
<UiPopover
id="profile-popover"
anchor-name="--profile"
position-block="bottom"
position-inline="right"
size="sm"
>
<template #header>
<strong>Jane Doe</strong>
</template>
<template #body>
<p>Product designer</p>
</template>
<template #footer>
<UiButton
variant="text"
text="Close"
popovertarget="profile-popover"
popovertargetaction="hide"
/>
</template>
</UiPopover>
</template>
Position the panel
positionBlock controls the vertical side and positionInline the horizontal side:
<template>
<UiPopover id="p1" anchor-name="--a1" position-block="top" position-inline="left" />
<UiPopover id="p2" anchor-name="--a2" position-block="bottom" position-inline="right" size="lg" />
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Unique id; the trigger targets it via popovertarget (required). |
anchorName | string | — | CSS anchor name to position against, e.g. --profile (required). The trigger must set anchor-name to the same value. |
positionBlock | 'top' | 'bottom' | 'top' | Vertical placement relative to the anchor. |
positionInline | 'left' | 'right' | 'left' | Horizontal placement relative to the anchor. |
size | 'sm' | 'lg' | — | Popover size. |
contentClass | string | string[] | — | Extra classes on the inner content wrapper. |
Slots: #header, #body, #footer.
Built on the native Popover API and CSS anchor positioning — supported in current Chromium and Safari; check browser support for your audience.
CSS variables
Set these on :root, or on any wrapper to restyle only the popovers inside it. The sm and lg sizes keep their own width and height, and on small screens the panel fills the viewport minus --cffy-popover-spacing.
:root {
--cffy-popover-radius: var(--cffy-radius-xl);
--cffy-popover-offset: var(--cffy-space-16);
}
| Variable | Default | Controls |
|---|---|---|
--cffy-popover-bg-color / --cffy-popover-color | --cffy-surface-overlay / --cffy-on-background | Panel background and text |
--cffy-popover-border-color | --cffy-outline-surface | Panel border and the footer divider |
--cffy-popover-radius | --cffy-shape-container (12px) | Panel corners |
--cffy-popover-shadow | --cffy-shadow-lg | Panel shadow |
--cffy-popover-max-width / --cffy-popover-max-height | --cffy-container-xs (20rem) / 30rem | Panel size limits |
--cffy-popover-spacing | --cffy-space-16 | Space around the header and footer; the content padding is half of it |
--cffy-popover-offset | 0.625rem | Distance from the trigger |
--cffy-popover-title-font-size / --cffy-popover-title-font-weight | --cffy-fs-xs / --cffy-fw-700 | Header title |
--cffy-popover-subtitle-font-size / --cffy-popover-subtitle-color | --cffy-fs-3xs / --cffy-muted-a10 | Header subtitle |
--cffy-popover-easing / --cffy-popover-duration | ease-in-out / --cffy-duration-250 | Open and close animation |