Overlay

Hover Card

Card flutuante ao passar o mouse, para informações extras.

Uso

Use o elemento <y-hover-card> no seu HTML:

html
<y-hover-card>  <span slot="trigger">@yampi</span>  <div>Informações do perfil Yampi</div></y-hover-card>

Exemplos

Padrão

Padrão

Importação

Importe todos os componentes ou apenas este:

typescript
// Importar tudoimport '@yampi/ui';// Importar apenas este componenteimport '@yampi/ui/dist/components/hover-card.js';

Acessibilidade

  • Suporta navegação por teclado
  • Utiliza atributos ARIA apropriados
  • focus-visible para indicação de foco