Popover
Click-triggered rich content panel. Different from Tooltip (which is hover-only with text). Use for filter forms, color pickers, mini detail views, confirmation prompts.
Filter panel — composes a form
Anchor + Content + Footer slots
Click the button to open; backdrop click and ESC dismiss.
Active filters: Active only
razor
<Popover Position="bottom-start" Width="md" Title="Filter results" ShowCloseButton="true">
<Anchor>
<Button Variant="secondary" Text="Filters">
<LeadingIcon>
<svg viewBox="0 0 20 20">...</svg>
</LeadingIcon>
</Button>
</Anchor>
<Content>
<Checkbox Label="Active patients only" Value="@_filterActive" ValueChanged="..." />
<Checkbox Label="Has unread notes" Value="@_filterNotes" ValueChanged="..." />
</Content>
<Footer>
<Button Variant="tertiary" Size="sm" Text="Reset" />
<Button Variant="primary" Size="sm" Text="Apply" />
</Footer>
</Popover>12 positions
top / bottom / left / right × start / center / end
Pick the placement that gives the popover room without obscuring its anchor.
razor
@* 12 positions: {top|bottom|left|right}-{start|center|end} *@
<Popover Position="top-start" Width="auto">
<Anchor><Button Variant="secondary" Size="sm" Text="top-start" /></Anchor>
<Content><p>Position: top-start</p></Content>
</Popover>Mini info — assignee preview
Click the avatar to open a profile mini-card
Any element can be the anchor — not just buttons.
razor
<Popover Position="bottom-start" Width="sm">
<Anchor>
<button type="button" style="background: transparent; border: none; cursor: pointer; padding: 0;">
<Avatar Initials="AT" Size="md" Color="blue" />
</button>
</Anchor>
<Content>
<div style="display: flex; align-items: center; gap: var(--spacing-3);">
<Avatar Initials="AT" Size="lg" Color="blue" />
<div>
<p>Aiko Tanaka</p>
<p>aiko.t@example.com</p>
</div>
</div>
<Button Variant="secondary" Size="sm" Text="View profile" />
</Content>
</Popover>