Popover

Displays rich content in a portal, triggered by a button

Interactive-mode

Installation instructions

Register the BlazorUI services in Program.cs:
```
builder.Services.AddSitecoreBlokUI();
```
Place a single <Popovers /> container in your root layout (e.g. MainLayout.razor) so floating content has a host to render into:
```
<Popovers @rendermode="InteractiveServer" />
```
Inject PopoverService wherever you need to show or hide a popover.

Divergence from Blok

Imperative PopoverService API instead of Blok's declarative <PopoverTrigger>/<PopoverContent> composition. Blok composes <Popover><PopoverTrigger></PopoverTrigger><PopoverContent>…</PopoverContent></Popover>; we require you to place a single <Popovers /> root container in your layout, declare the popover content with <Popover Id="…">, inject PopoverService, and call Pops.Show(id, anchor) / Pops.Hide(id) from your trigger. This matches the way Blazor apps idiomatically manage floating UI and avoids portal-allocation races across interactive-server boundaries. Positioning is below the anchor element only — Blok's side and align props are not yet exposed.

Examples

Usage

Popover requires PopoverService injection and the Popovers container component in your layout.

See the code example for the full integration pattern.

API

The element family below can be composed together. Click an element to jump to its properties.

Element	Purpose
Popover	Declares a popover by `Id`. Renders no markup itself — `PopoverService` snapshots its `ChildContent` and hands it to the global `Popovers` host when `Show(id, anchor)` is called.
Popovers	Global host container that renders every active `Popover`. Place exactly one instance at the root of your layout so floating content has a portal to inject into.

Declares a popover by Id. Renders no markup itself — PopoverService snapshots its ChildContent and hands it to the global Popovers host when Show(id, anchor) is called.

Property	Type	Description
Id	string	Unique identifier used by `PopoverService.Show` / `PopoverService.Hide` to target this popover.
Overlay	bool	When true, renders a dimmed backdrop behind the popover. Default: `false`.
CloseOnBackgroundClick	bool	When true, clicking the overlay dismisses the popover. Default: `true`.
OnClose	EventCallback	Invoked after the popover is hidden, regardless of whether it was closed via `PopoverService.Hide` or the overlay click.
ClassName	string?	Extra CSS classes appended to the popover's outer wrapper when it is rendered inside `Popovers`.
ChildContent	RenderFragment?	Popover body content.

Popovers

Global host container that renders every active Popover. Place exactly one instance at the root of your layout so floating content has a portal to inject into.

This element has no public parameters.