Skip to main content
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",
  "children?": "[Component]",
  "let?": "object",
  "side?": "top | right | bottom | left",
  "openDelay?": "number",
  "closeDelay?": "number",
  "cssClass?": "string"
}
For the complete protocol schema, see HoverCard.