# Baliza Balões de dica e menus presos ao botão que os abre, que mudam de lado sozinhos quando encostam na borda. > Baliza é um componente exclusivo do THM Componentes de dicas e menus presos ao elemento que os abre. Usa CSS Anchor Positioning e Popover API para trocar de lado perto das bordas, com seta que acompanha, fechamento por Esc e clique fora, e uma reserva em JS para navegadores sem suporte. Serve para editores, painéis e formulários. - Categoria: Navegação e scroll - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/baliza/ ## 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 ```text 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. ## Componentes relacionados - [Canivete](https://vibecode.thmtecnologia.com/componentes/canivete/): O menu que aparece no clique com o botão direito, com submenus, atalhos e opções marcáveis, no visual do seu app. - [Trevo](https://vibecode.thmtecnologia.com/componentes/trevo/): Uma janela de busca que abre com Ctrl K ou ⌘K para achar páginas e executar ações sem tirar as mãos do teclado. - [Crachá](https://vibecode.thmtecnologia.com/componentes/cracha/): Fileira de fotos redondas sobrepostas; ao passar o mouse, um balão com nome e cargo surge e balança com o cursor. - [Bonde](https://vibecode.thmtecnologia.com/componentes/bonde/): Um menu de cabeçalho em que um único painel desliza e muda de tamanho ao passar de um item para outro. - [Cicerone](https://vibecode.thmtecnologia.com/componentes/cicerone/): Um tour de primeiro acesso que escurece a tela, destaca um elemento de cada vez e explica o que ele faz. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.