ObjectUIObjectUI
ComponentsOverlay

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

Hover over me

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;
}

On this page