Introducción

Un contenedor emergente flotante y no modal que aparece cuando un usuario pasa el cursor por encima o enfoca un elemento desencadenante adjunto. Proporciona información contextual ligera, vistas previas enriquecidas o acciones rápidas sin navegar fuera de la página actual.

El componente HoverCard está totalmente integrado como un bloque hovercard en el Page Builder, permitiendo a los autores de contenido y desarrolladores vincular fácilmente elementos desencadenantes (como botones o fragmentos de texto) a bloques de vista previa detallados directamente dentro del CMS.

Uso a través del CMS Page Builder (JSON)

Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran bloques de vista previa de hovercard dentro de los esquemas de página JSON (content/pages/*.json).

1. Vista Previa de Perfil Estándar

Envuelve un botón desencadenante con una tarjeta flotante que muestra una vista rápida del usuario, incluyendo avatar, nombre y rol.

{
  "type": "hovercard",
  "openDelay": 200,
  "closeDelay": 150,
  "positioning": "bottom",
  "trigger": [
    {
      "type": "button",
      "text": "About the Author",
      "variant": "outline"
    }
  ],
  "content": [
    {
      "type": "avatar",
      "name": "J. Chen"
    },
    {
      "type": "heading",
      "level": 4,
      "text": "Jules Chen"
    },
    {
      "type": "text",
      "text": "Lead Architect"
    }
  ]
}

2. Contexto de Enlace Enriquecido

Utiliza JSX secundario personalizado para adjuntar una HoverCard a texto en línea. Muestra cómo se pueden inyectar texto de encabezado y descripciones personalizados.

{
  "type": "hovercard",
  "openDelay": 300,
  "closeDelay": 100,
  "positioning": "top",
  "trigger": [
    {
      "type": "text",
      "text": "Hono framework"
    }
  ],
  "content": [
    {
      "type": "heading",
      "level": 4,
      "text": "Hono"
    },
    {
      "type": "text",
      "text": "Ultrafast web framework for the Edge."
    }
  ]
}

Referencia de Configuración CMS

Estos campos se asignan directamente a las propiedades de bloque de Sveltia CMS bajo public/admin/config.yml o las configuraciones del Page Builder:

Notas para Desarrolladores y Accesibilidad

• Hidratación Retrasada Inteligente: Por defecto, el desencadenante y la tarjeta se renderizan como HTML estático. La HoverCard solo se hidrata como una isla del lado del cliente cuando se proporciona "interactive": true, permitiendo enlaces internos clicables.
• Cumplimiento WAI-ARIA: En su interior, el componente utiliza conexiones estándar aria-describedby y gestiona los anillos de foco correctamente. La tarjeta flotante se descarta correctamente cuando se presiona la tecla escape o el foco abandona los límites del desencadenante.
• Respaldo de Foco Elegante: Como los eventos de hover no son accesibles para usuarios de teclado y lectores de pantalla, la tarjeta también se activa con el foco del teclado (tab), asegurando paridad para interacciones sin mouse.