Popover

Overview

Popover composes the headless NaviusPopover primitive family, which owns anchored positioning and the dismissable layer (outside-click, Escape). The styled layer adds the floating panel classes and the slide-in animation keyed off the popup’s placement side.

Install

navius add popover --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsPopover>
    <ZitsPopoverTrigger>Open popover</ZitsPopoverTrigger>
    <ZitsPopoverContent class="w-80">
        <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>
    </ZitsPopoverContent>
</ZitsPopover>

Parts and props

ZitsPopover’s Open, OpenChanged, DefaultOpen, Modal, and ChildContent pass through to NaviusPopover unchanged. ZitsPopoverAnchor and ZitsPopoverTrigger pass their Attributes through unchanged. ZitsPopoverContent adds:

Prop	Type	Default	Description
Side	string	"bottom"	Popup side.
Align	string	"center"	Popup alignment.
SideOffset	double	4	Gap from the trigger, in pixels.
Motion	string?	null	Optional Navius.Motion presence class (e.g. motion-pop) forwarded onto the popup. Inert unless the app links _content/Navius.Motion/navius-motion.css.

Styling surface

Attributes on every part is merged with that part’s preset class set via Cn.Merge, caller classes applied last.

Parameter	Values
Side	top · bottom · left · right
Align	start · center · end

Data attribute hooks

Part	Attribute	Description
Popup	data-open, data-closed, data-side	Open-state and placement hooks driving the enter/exit and slide-in Tailwind animation classes, emitted by the composed NaviusPopoverPopup primitive.

Underlying primitives

• NaviusPopover