HoverCard
For sighted users to preview content available behind a link
Divergence from Blok
No explicit TooltipProvider-style root. Blok wraps Radix UI's HoverCard primitive which honours a shared delayDuration context. BlazorUI's HoverCard self-manages OpenDelay / CloseDelay per instance (defaults 700 / 300 ms, matching Radix), so no provider component is required.
Hover-only; focus does not open the card. Radix opens the card on keyboard focus for a11y. For now BlazorUI's trigger responds only to mouse mouseenter / mouseleave. If you need keyboard-driven preview, use Popover.
Positioning is computed from trigger bounds with a known w-64 (256px) content width. Content height is unknown pre-render, so Side="HoverCardSide.Top" and Side="HoverCardSide.Left" use a short height estimate on the first open; the enter animation masks the minor correction.
Examples
Default
Side: top
Side: right
Alignment: start
Custom delay
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| HoverCard | Root container that owns the open/close state and timing. Cascades itself to HoverCardTrigger and HoverCardContent children. |
| HoverCardTrigger | Element that opens the HoverCard on mouse enter. Registers its bounds with the parent so the content can position itself. |
| HoverCardContent | Pop-over body rendered at fixed position when the HoverCard is open. Hovering the body keeps it open via a cancelled close timer. |
HoverCard
Root container that owns the open/close state and timing. Cascades itself to HoverCardTrigger and HoverCardContent children.
| Property | Type | Required | Description |
|---|---|---|---|
| OpenDelay | int | Milliseconds to wait after mouse enter before opening. Default: 700. | |
| CloseDelay | int | Milliseconds to wait after mouse leave before closing. Default: 300. | |
| OpenChanged | EventCallback<bool> | Invoked when the card opens or closes. | |
| ChildContent | RenderFragment? | Should contain one HoverCardTrigger and one HoverCardContent. |
HoverCardTrigger
Element that opens the HoverCard on mouse enter. Registers its bounds with the parent so the content can position itself.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the trigger <span>. | |
| ChildContent | RenderFragment? | Trigger content — typically a link, button, or avatar. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the trigger <span>. |
HoverCardContent
Pop-over body rendered at fixed position when the HoverCard is open. Hovering the body keeps it open via a cancelled close timer.
| Property | Type | Required | Description |
|---|---|---|---|
| Side | HoverCardSide | Which edge of the trigger to anchor to. Default: HoverCardSide.Bottom. Other values: Top, Right, Left. | |
| Align | HoverCardAlign | Alignment along the chosen side. Default: HoverCardAlign.Center. Other values: Start, End. | |
| SideOffset | int | Pixel gap between trigger and content along the chosen side. Default: 4. | |
| ClassName | string? | Extra CSS classes appended to the content container. | |
| ChildContent | RenderFragment? | The pop-over's body content. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the content container. |