HoverCard

HoverCards display rich content in a floating panel when users hover over a trigger element. The first child becomes the trigger; all remaining children become the panel content. For plain-text hover labels, Tooltip is simpler. For interactive content that needs to stay open (forms, menus), use Popover instead — it requires a click and stays open until dismissed.

Basic Usage

Instant Hover

Set open_delay=0 for immediate feedback, useful in dashboards and status displays where users are scanning quickly.

Side Placement

Control which side the panel appears on. The renderer auto-adjusts if the card would overflow the viewport.

from prefab_ui.components import Badge, HoverCard, Text

with HoverCard(side="right"):
    Badge("Details")
    Text("Panel appears to the right of the trigger.")

API Reference

HoverCard Parameters

side

str | None

default:"None"

Preferred side to show the card: "top", "right", "bottom", "left".

open_delay

int | None

default:"None"

Delay in milliseconds before the card appears. Defaults to the Radix default (700ms). Set to 0 for instant hover.

close_delay

int | None

default:"None"

Delay in milliseconds before the card dismisses after the cursor leaves.

css_class

str | None

default:"None"

Additional Tailwind CSS classes.

Protocol Reference

HoverCard

{
  "type": "HoverCard",
  "id?": "string",
  "onMount?": "any",
  "children?": "[Component]",
  "let?": "object",
  "side?": "top | right | bottom | left",
  "openDelay?": "number",
  "closeDelay?": "number",
  "cssClass?": "string"
}

For the complete protocol schema, see HoverCard.

Embed

Icon

⌘I

Get Started

Concepts

Apps

Running Prefab

Examples

Reference

Basic Usage

Instant Hover

Side Placement

API Reference

HoverCard Parameters

Protocol Reference

​Basic Usage

​Instant Hover

​Side Placement

​API Reference

HoverCard Parameters

​Protocol Reference

Basic Usage

Instant Hover

Side Placement

API Reference

Protocol Reference