Popover

RzPopover lets you render floating content that’s anchored to a trigger element—no page navigation or messy workarounds. Think tooltips, forms, or quick-access panels, all staying in view and behaving well across screen sizes.

Under the hood, this component ties together Alpine.js (for state and interactivity) and floating-ui (for robust positioning), so you don’t need to wrangle the DOM or manage pixel math yourself.

Under the Hood

RzPopover uses an Alpine.js component (x-data="rzPopover") for managing open/close state and user interactions. Placement is handled by floating-ui, which keeps the popover visible and anchored—even if the viewport or scroll position changes.

Basic Popover

Here’s a basic popover attached to a button. The popover contains a small form, but you can embed any interactive content you need—everything from menus to custom panels. Positioning and accessibility are automatic.

Source

<RzPopover>
    <PopoverTrigger>
        <RzButton Variant="ThemeVariant.Primary" AsChild>Open Popover</RzButton>
    </PopoverTrigger>
    <PopoverContent>
        <div class="grid gap-4">
            <div class="space-y-2">
                <h4 class="font-medium leading-none">Dimensions</h4>
                <p class="text-sm text-muted-foreground">
                    Set the dimensions for the layer.
                </p>
            </div>
            <div class="grid gap-2">
                <div class="grid grid-cols-3 items-center gap-4">
                    <label for="width">Width</label>
                    <input id="width" value="100%" class="col-span-2 h-8 input" />
                </div>
                <div class="grid grid-cols-3 items-center gap-4">
                    <label for="maxWidth">Max. width</label>
                    <input id="maxWidth" value="300px" class="col-span-2 h-8 input" />
                </div>
                <div class="grid grid-cols-3 items-center gap-4">
                    <label for="height">Height</label>
                    <input id="height" value="25px" class="col-span-2 h-8 input" />
                </div>
                <div class="grid grid-cols-3 items-center gap-4">
                    <label for="maxHeight">Max. height</label>
                    <input id="maxHeight" value="none" class="col-span-2 h-8 input" />
                </div>
            </div>
        </div>
    </PopoverContent>
</RzPopover>

RzPopover Component Parameters

Parameters at a glance: Customize RzPopover’s behavior and positioning by tweaking these properties. Most developers will only need the defaults, but the knobs are here if you want to fine-tune layout or accessibility.

Property	Description	Type	Default
`PopoverTrigger`	`RenderFragment` – The trigger element users interact with to open the popover.	`RenderFragment`	Required
`PopoverContent`	`RenderFragment` – Content displayed inside the floating popover panel.	`RenderFragment`	Required
`Anchor`	`AnchorPoint` – Preferred placement (top, bottom, etc.) relative to the trigger.	`AnchorPoint`	`AnchorPoint.BottomStart`
`Offset`	`int` – Pixel offset along the anchor axis.	`int`	`4`
`CrossAxisOffset`	`int` – Pixel offset on the cross axis (perpendicular to anchor).	`int`	`0`
`AlignmentAxisOffset`	`int` – Pixel offset for alignment axis, if used.	`int`	`0`
`Strategy`	`AnchorStrategy` – Positioning mode. Use `fixed` if your trigger is in a scrollable container.	`AnchorStrategy`	`AnchorStrategy.Absolute`
`EnableFlip`	`bool` – If true, popover will "flip" sides when needed to stay visible.	`bool`	`true`
`EnableShift`	`bool` – If true, popover will shift along its axis to stay in the viewport.	`bool`	`true`
`ShiftPadding`	`int` – Viewport padding in pixels before shifting kicks in.	`int`	`8`
`AriaLabel`	`string?` – Accessible label for the popover container.	`string?`	`null`