Popover

Floating panel anchored to a trigger element; requires PopoverProvider in layout.

Installation

Add the Popover component using the CLI:

shadcnblazor component add popover

Usage

The Popover component displays a floating panel anchored to a trigger. Use Anchor for the trigger element and ChildContent for the panel. Requires PopoverProvider in your layout (already present in the docs). Bind Open for controlled state.

<Popover @bind-Open="_open" CloseOnOutsideClick="true">
    <Anchor>
        <Button Variant="@Variant.Default" OnClick="Toggle">
            @(_open ? "Close" : "Open") Popover
        </Button>
    </Anchor>
    <ChildContent>
        <div class="w-64 rounded-lg border bg-popover text-popover-foreground shadow-lg p-4 text-sm">
            <p class="font-semibold">Popover content</p>
            <p class="text-muted-foreground">This panel is anchored to the trigger button.</p>
        </div>
    </ChildContent>
</Popover>

@code {
    private bool _open;

    private void Toggle() => _open = !_open;
}

Examples

Placement

Use AnchorOrigin and TransformOrigin to control where the popover appears relative to the trigger.

<Popover @bind-Open="_open"
         AnchorOrigin="PopoverPlacement.BottomLeft"
         TransformOrigin="PopoverPlacement.TopLeft"
         CloseOnOutsideClick="true">
    <Anchor>
        <Button Variant="@Variant.Outline" OnClick="Toggle">Bottom-left placement</Button>
    </Anchor>
    <ChildContent>
        <div class="w-48 rounded-lg border bg-popover text-popover-foreground shadow-lg p-3 text-sm">
            Popover anchored to bottom-left of trigger.
        </div>
    </ChildContent>
</Popover>

@code {
    private bool _open;

    private void Toggle() => _open = !_open;
}

API Reference

Popover

Floating panel anchored to a trigger element; requires PopoverProvider in layout.

Properties

Name	Type	Description
`Anchor`	`RenderFragment`	Content rendered as the anchor/trigger element.
`AnchorAttributes`	`Dictionary<string, Object>`	Additional attributes for the anchor element.
`AnchorClass`	`string`	CSS classes for the anchor element.
`AnchorOrigin`	`PopoverPlacement`	Where the popover is anchored relative to the trigger.
`Animate`	`bool`	Whether to animate open/close transitions.
`AriaHasPopup`	`string`	Value for aria-haspopup on the trigger. Use "menu" for dropdown menus, "listbox" for selects, "dialog" for dialogs.
`ChildContent`	`RenderFragment`	Content rendered inside the popover panel.
`ClampList`	`bool`	Whether to clamp the popover within the viewport.
`CloseOnOutsideClick`	`bool`	Whether clicking outside closes the popover.
`ExitAnimationDurationMs`	`int`	Duration of the close animation in milliseconds.
`LockScroll`	`bool`	Whether to lock body scroll while the popover is open.
`Offset`	`int`	Gap in pixels between the popover and its anchor. Applied in the direction away from the anchor (respects flip).
`Open`	`bool`	Whether the popover is open.
`OpenChanged`	`EventCallback<bool>`	Callback invoked when the open state changes.
`PopoverAttributes`	`Dictionary<string, Object>`	Additional attributes for the popover panel.
`PopoverClass`	`string`	CSS classes for the popover panel.
`TransformOrigin`	`PopoverPlacement`	Transform origin for the popover content.
`WidthMode`	`PopoverWidthMode`	How the popover width is determined.

Events

Name	Type	Description
`OpenChanged`	`EventCallback<bool>`	Callback invoked when the open state changes.

Methods

Method	Returns	Description
`DisposeAsync`	`ValueTask`
`Equals`	`bool`
`GetHashCode`	`int`
`GetType`	`Type`
`HandleOutsidePointerDown`	`Task`	Handles pointer down events outside the popover for close-on-outside-click behavior.
`SetParametersAsync`	`Task`
`ToString`	`string`

Mobile support for API reference coming soon.