Introdução

Um contêiner pop-up flutuante e não modal que aparece quando um usuário passa o cursor ou foca um elemento gatilho anexado. Ele fornece informações contextuais leves, visualizações prévias ricas ou ações rápidas sem navegar para fora da página atual.

O componente HoverCard está totalmente integrado como um bloco hovercard no Page Builder, permitindo que autores de conteúdo e desenvolvedores vinculem facilmente elementos gatilho (como botões ou trechos de texto) a blocos de visualização detalhados diretamente no CMS.

Uso via CMS Page Builder (JSON)

Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam blocos de visualização hovercard dentro dos esquemas de página JSON (content/pages/*.json).

1. Visualização de Perfil Padrão

Envolve um botão gatilho com um cartão flutuante exibindo um instantâneo rápido do usuário, incluindo avatar, nome e função.

{
  "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 Link Rico

Usa JSX filho personalizado para anexar um HoverCard a texto em linha. Mostra como texto de cabeçalho e descrições personalizados podem ser injetados.

{
  "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."
    }
  ]
}

Referência de Configuração CMS

Esses campos mapeiam diretamente para as propriedades de bloco do Sveltia CMS em public/admin/config.yml ou as configurações do Page Builder:

Notas do Desenvolvedor e Acessibilidade

• Hidratação Atrasada Inteligente: Por padrão, o gatilho e o cartão são renderizados como HTML estático. A HoverCard só é hidratada como uma ilha do lado do cliente quando "interactive": true é fornecido, permitindo links internos clicáveis.
• Conformidade WAI-ARIA: Nos bastidores, o componente usa conexões padrão aria-describedby e gerencia corretamente os anéis de foco. O cartão flutuante é descartado corretamente quando a tecla escape é pressionada ou o foco sai dos limites do gatilho.
• Fallback de Foco Elegante: Como os eventos de hover são inacessíveis para usuários de teclado e leitores de tela, o cartão também é ativado no foco do teclado (tab), garantindo paridade para interações sem mouse.