Hover Card

Overview

HoverCard composes the headless NaviusPreviewCard primitive family, which owns the hover/focus-intent open timing (OpenDelay/CloseDelay) and dismissal (non-modal). The styled layer adds the floating card panel classes and the slide-in animation keyed off the popup’s placement side.

Discrepancy: the registry item is named hover-card, but every component class is ZitsPreviewCard* (ZitsPreviewCard, ZitsPreviewCardTrigger, ZitsPreviewCardContent), not ZitsHoverCard*; the corresponding docs site page is titled “Preview Card” at /docs/components/preview-card. This manifest follows the registry name (hover-card, per registry/registry.json) since that is what navius add expects, while using the actual ZitsPreviewCard* class names in Usage.

Install

navius add hover-card --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsPreviewCard>
    <ZitsPreviewCardTrigger class="...">@("@nextjs")</ZitsPreviewCardTrigger>
    <ZitsPreviewCardContent class="w-80">
        <div class="flex justify-between gap-4">
            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-semibold">VC</div>
            <div class="space-y-1">
                <h4 class="text-sm font-semibold">@("@nextjs")</h4>
                <p class="text-sm">The React Framework, created and maintained by @("@vercel").</p>
                <span class="text-xs text-muted-foreground">Joined December 2021</span>
            </div>
        </div>
    </ZitsPreviewCardContent>
</ZitsPreviewCard>

Parts and props

ZitsPreviewCard’s Open, OpenChanged, DefaultOpen, and ChildContent pass through to NaviusPreviewCard unchanged. ZitsPreviewCardTrigger’s Attributes pass through to NaviusPreviewCardTrigger unchanged. The styled wrapper adds:

Prop	Type	Default	Description
`ZitsPreviewCard.OpenDelay`	`int`	`600`	Hover-open delay in ms.
`ZitsPreviewCard.CloseDelay`	`int`	`300`	Hover-close delay in ms.
`ZitsPreviewCardContent.Side`	`string`	`"bottom"`	Popup side.
`ZitsPreviewCardContent.Align`	`string`	`"center"`	Popup alignment.
`ZitsPreviewCardContent.SideOffset`	`double`	`4`	Gap from the trigger.

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 `NaviusPreviewCardPopup` primitive.

Underlying primitives

NaviusPreviewCard