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

Schema

interface HoverCardSchema {
  type: 'hover-card';
  trigger: SchemaNode | SchemaNode[];   // Trigger element
  content: SchemaNode | SchemaNode[];   // 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