ObjectUIComponentsOverlay
Hover Card
Display rich content in a popup when hovering over a trigger
The Hover Card component displays rich content when hovering over an element.
Basic Usage
Basic Hover Card
{
"type": "hover-card",
"trigger": {
"type": "text",
"value": "Hover over me"
},
"content": {
"type": "text",
"value": "This is the hover card content"
}
}Schema
interface HoverCardSchema {
type: 'hover-card';
trigger: ComponentSchema; // Trigger element
content: ComponentSchema; // Card content
side?: 'top' | 'right' | 'bottom' | 'left';
align?: 'start' | 'center' | 'end';
openDelay?: number; // Delay before opening (ms)
closeDelay?: number; // Delay before closing (ms)
className?: string;
}