Como ele é
Parece aquela fileira de fotos de equipe em que os rostos se encostam. Os avatares são círculos de 56 pixels com borda branca, sobrepostos em parte. Com o mouse sobre um deles, a foto cresce e vem para a frente, e acima dela surge um balão preto com o nome em negrito e o cargo embaixo, em branco. O balão nasce pequeno, sobe com um quique de mola e, enquanto o cursor anda sobre a foto, inclina e desliza para o mesmo lado, como uma plaquinha balançando. A base tem duas linhas finas, verde e azul. O balão é preto nos dois temas e some quando o mouse sai.
Você pode estar procurando isto se pediu algo assim
- fotos da equipe que mostram o nome quando passo o mouse
- avatares redondos lado a lado com um balãozinho em cima
- mostrar quem são os sócios de um jeito mais divertido
- aquele efeito em que o nome aparece balançando em cima da foto
- lista de autores com o cargo aparecendo no hover
- rostos dos clientes sobrepostos com tooltip animado
- deixar a seção sobre nós com cara mais moderna
Também chamado de
- tooltip animado
- fileira de avatares
- grupo de avatares
- avatar group
- avatar stack
- balão de dica
- hover tooltip
Quando usar
- Seção de equipe ou de sócios numa página institucional
- Prova social com rostos de clientes ou alunos perto da chamada principal
- Lista de autores, palestrantes ou mentores de um curso ou evento
- Faixa de créditos com quem participou de um projeto
Quando evitar
- Informações essenciais, já que o balão depende do mouse e não abre pelo teclado
- Públicos que acessam quase só pelo celular, em que não existe hover
Como pedir para a sua IA
Crie uma fileira de avatares sobrepostos com tooltip animado na seção de equipe: ao passar o mouse, um balão com nome e cargo surge com efeito de mola e inclina conforme o cursor. Faça o balão abrir também por foco e toque, use as cores da marca e tenha versão estática para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Crachá
Crachá funciona no celular?
Só em parte. Crachá responde a eventos de mouse, como entrar, mover e sair da foto, então em telas de toque o balão pode não aparecer. Os avatares continuam visíveis, com o nome no texto alternativo da imagem. Para celular, vale pedir à IA que o balão abra ao toque ou que nome e cargo fiquem visíveis abaixo.
Dá para usar Crachá com teclado e leitor de tela?
Não como vem. Crachá não recebe foco nem abre o balão pelo teclado, e nome e cargo só aparecem no hover; o leitor de tela lê apenas o nome no atributo alt de cada foto. Peça à IA para tornar cada avatar focável e mostrar o balão no foco, com o cargo também acessível.
Como troco as cores do balão de Crachá?
Em Crachá, o balão é preto com texto branco e duas linhas finas em verde e azul na base, cores fixas que não mudam no modo escuro. O prompt do THM Componentes pede à IA para trocar esses tons pelos tokens de cor do seu projeto, o que permite um balão claro no tema claro, por exemplo.
