Como ele é
A demonstração é um editor de documento de fundo claro. Na barra do topo, passar o mouse sobre um ícone, como desfazer ou negrito, mostra depois de um instante um balão escuro com o nome da ação e o atalho, Ctrl ou ⌘ conforme o sistema; as dicas vizinhas abrem sem espera. No texto, termos sublinhados com pontinhos abrem um cartão branco com a explicação. Botões como Compartilhar e Exportar abrem menus brancos com ícones. Perto da borda, cada balão troca de lado sozinho e a setinha acompanha. A entrada é um leve crescer com esmaecer, e um indicador no rodapé mostra qual tecnologia está em uso.
Você pode estar procurando isto se pediu algo assim
- balãozinho de dica que aparece quando passo o mouse no botão
- tooltip que não corta na borda da tela
- menu que abre embaixo do botão e muda de lado quando não cabe
- mostrar o atalho do teclado ao passar o mouse no ícone
- explicação que aparece ao passar o mouse numa palavra do texto
- menu de conta que abre ao clicar no avatar
- dicas de ferramenta iguais às dos editores de documento profissionais
- tooltip acessível que também abre pelo teclado
Também chamado de
- tooltip
- dica flutuante
- balão de ajuda
- menu suspenso
- popover
- anchor positioning
- dropdown menu
- flip tooltip
Quando usar
- Barras de ferramentas de editores com dicas de ação e atalho
- Glossário dentro do texto, com explicação ao passar o mouse ou focar
- Menus de conta, compartilhar e exportar em painéis e SaaS
- Formulários com ajuda curta ao lado dos campos
Quando evitar
- Informações essenciais, que não deveriam ficar escondidas atrás de uma dica
- Uso direto como componente genérico, já que dicas e menus vêm definidos no próprio arquivo, junto da cena de exemplo
Como pedir para a sua IA
Crie dicas e menus ancorados para a barra de ferramentas do meu editor com CSS Anchor Positioning e Popover API: inversão de lado nas bordas, seta que acompanha, atalho exibido conforme o sistema, abertura pelo teclado, Esc para fechar e reserva em JS para navegadores sem suporte.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Baliza
Baliza funciona em navegadores sem Anchor Positioning?
Funciona. Baliza testa o suporte com CSS.supports e com o atributo popover; sem ele, uma reserva em JS calcula a posição, inverte o lado nas bordas, desliza para caber e fecha por clique fora e Esc. Um indicador na demonstração mostra o modo em uso, e a prop forceFallback força a reserva para testes.
Como uso Baliza nos meus próprios botões?
Em Baliza, as dicas e os menus ficam numa lista dentro do próprio arquivo, junto com a cena de exemplo de um editor. Peça à IA que troque essa lista pelos seus botões, textos e itens de menu, mantendo o posicionamento ancorado, a inversão nas bordas e o evento select, que informa o menu e o item escolhido.
Baliza é acessível pelo teclado e no celular?
Sim. Em Baliza, as dicas aparecem na hora ao focar com Tab e ficam ligadas ao botão para o leitor de tela; os menus abrem com as setas, navegam com setas, Home e End e fecham com Esc ou Tab, devolvendo o foco. No celular, um toque abre ou fecha a dica.
