Tooltip, Popups & Popovers
Resumo
Uma tooltip é um elemento de UI que fornece informações adicionais sobre um item quando o usuário passa o cursor do mouse sobre ele ou toca em dispositivos táteis.
As tooltips geralmente aparecem como pequenos balões ou caixas de texto, mostrando uma descrição breve, explicação, ou instruções para o elemento de interface em questão.
As tooltips são úteis para fornecer contexto adicional sem sobrecarregar a interface principal com informações excessivas. Elas ajudam os usuários a entender melhor as funções e a interagir com a interface de forma mais eficiente.
Anatomia
Contêiner: A caixa que abriga o conteúdo.
Texto: A informação ou microconteúdo exibido.
Seta (Tip): Um elemento opcional (mas recomendável em certos casos) que indica a origem ou localização da tooltip na interface.
Localizações
O posicionamento de uma tooltip não deve ser aleatório. Além das posições padrão (Top, Right, Left, Bottom), existem variações como Top Right ou Top Left.
Crescimento do Texto: O uso de alinhamentos laterais (como a seta no canto esquerdo) permite que o texto se expanda para o lado oposto sem comprometer a leitura ou sair da área visível da tela.
Indicação de Âncora: Em interfaces com muitos ícones próximos, a presença da seta é crucial para que o usuário identifique exatamente a qual elemento a informação se refere.
Quando usar?
Explicação da funcionalidade
As dicas de ferramentas podem ser usadas para fornecer explicações ou rótulos para ícones ou símbolos que podem não ser imediatamente claros para o usuário. Quando o usuário toca ou passa o cursor sobre o ícone, uma dica de ferramenta aparece para explicar sua funcionalidade ou finalidade.
Facilidade de descoberta de funcionalidades
As dicas de ferramentas podem ser usadas para destacar recursos novos ou ocultos do aplicativo. Quando um novo recurso é introduzido ou um recurso que pode não ser óbvio para o usuário é disponibilizado, uma dica de ferramenta pode aparecer para informar e orientar o usuário sobre como usá-lo.
Ajuda do campo de formulário
As dicas de ferramentas podem ser usadas para fornecer orientações ou instruções para o preenchimento de campos específicos de um formulário. Quando o usuário toca ou seleciona um campo do formulário, uma dica de ferramenta pode aparecer para explicar que tipo de entrada é esperada ou fornecer exemplos.
Informações promocionais
As dicas de ferramentas podem ser usadas para fornecer informações sobre uma promoção em andamento, de forma semelhante a destacar um recurso de um aplicativo. Mais importante ainda, essas dicas de ferramentas são temporárias e não se estendem a outras páginas.
Use quando a informação não é vital para completar a tarefa
Tooltip é conteúdo complementar, não essencial. Antes de usar uma, pergunte: o usuário precisa dessa informação para concluir a tarefa? Se a resposta for sim — como os requisitos de uma senha num formulário — ela deve estar visível na tela, não escondida atrás de hover ou clique. Tooltip serve para o que é bom saber, não para o que é obrigatório saber.
Tooltips vs Popup vs Popovers
Popovers: Visualização temporária que aparece sobre outro conteúdo quando as pessoas clicam ou tocam em um controle ou área interativa.
Pop-up: Janela secundária ou banner que aparece repentinamente em primeiro plano na tela enquanto você navega em um site
Tooltip | Popups | Popovers/Toggletip | |
|---|---|---|---|
Dispositivo | Desktop | Sem preferência | Sem preferência |
Iniciado por | Hover | Automático | Touch/Click |
Terminado quando | Mouse left | Click/Touch | Click/Touch |
Elemento complementar | Ícone | Ícone, link de texto, botão, imagem | Ícones, textos, botões, imagens |
Tipo de conteúdo |
|
|
|
Boas práticas
Seja direto ao escrever a tooltip
O texto precisa ser curto e escaneável — quem lê uma tooltip está no meio de outra ação e não quer parar para interpretar. Use linguagem simples, vá direto ao ponto e evite jargão. Como referência prática, mire em poucas palavras; se você precisa de duas frases ou de um botão dentro, o componente certo provavelmente é um popover, não uma tooltip.
Permita interação com mouse e teclado
Uma tooltip que só aparece no hover do mouse fica inacessível para quem navega por teclado — e isso é uma parcela real de usuários, não um caso de borda. A boa prática é disparar a tooltip tanto no hover quanto no foco do elemento (via Tab), para que o conteúdo apareça nos dois caminhos de navegação. Em telas de toque, o equivalente costuma ser o toque ou o long-press.
Use uma seta pra indicar a posição quando há muitos itens lado a lado
Quando há vários elementos próximos — uma barra de ícones, por exemplo — a tooltip sem seta deixa ambíguo a qual deles ela se refere. A seta (tip) ancora visualmente a tooltip no elemento de origem e elimina essa dúvida. O caso clássico é uma toolbar com ícones colados: sem a seta, o usuário não sabe se a dica pertence ao ícone da esquerda ou ao da direita.
Use tooltips para ícones sem título
Ícones sem rótulo dependem de reconhecimento, e nem todo ícone é óbvio. A tooltip resolve mostrando o significado no hover ou foco (um lápis revela “Editar”; uma lupa com câmera revela “Buscar por imagem”). Mas vale o contraponto: tooltip em ícone é meio remendo — se você precisa explicar o que o ícone faz, a pergunta anterior é se ele não deveria ter um rótulo visível. Interfaces muito enxutas tendem a exigir mais tooltips, e cada uma transfere um pouco de esforço pro usuário.
Exiba apenas um popover por vez
Exibir vários popovers polui a interface e causa confusão. Nunca exiba uma cascata ou hierarquia de popovers, em que um surge do outro. Se precisar exibir um novo popover, feche o que está aberto primeiro.
Sempre salve o trabalho do usuário ao fechar automaticamente um popover não modal
Os usuários podem fechar um popover não modal sem querer, clicando ou tocando fora de seus limites. Descarte o trabalho do usuário somente quando ele clicar ou tocar em um botão Cancelar explícito.
Evite criar popovers muito grandes.
Faça com que o tamanho do popover seja suficiente apenas para exibir seu conteúdo e indicar a origem da exibição. Se necessário, o sistema pode ajustar o tamanho do popover para garantir que ele se encaixe bem na interface
Considere permitir que os usuários destaquem um popover
Eles podem gostar da possibilidade de converter um popover em um painel caso queiram visualizar outras informações enquanto o popover permanece visível.
Não utilize pop-ups intrusivos.
Em vez de incomodar seus visitantes com pop-ups intrusivos (pop-ups de entrada tradicionais), deixe-os conhecer seu site primeiro. Depois, você pode exibir o pop-up quando o comportamento deles indicar que estão prontos para ver uma mensagem secundária.
Exibir o pop-up após X% de rolagem
Exiba seu pop-up quando o visitante estiver prestes a sair do site
Geolocalização
Utilize popups para direcionar os visitantes com base na etapa em que se encontram no processo de compra
Visitantes conscientes do problema: Se você tem um artigo sobre “dicas de corrida para iniciantes”, você também poderia promover um e-book que oferece dicas práticas sobre como correr uma prova de 10 km.
Visitantes que buscam soluções: Uma abordagem comprovada envolve mostrar a eles os produtos mais populares (ou produtos “em alta”) na categoria que estão navegando.
Visitantes mais informados Oferta especial irresistível, disponível apenas por tempo limitado, é a melhor maneira de convencer esse segmento a comprar agora em vez de depois.
Acesibilidade
A
Quando o gatilho é um ícone (o "?" ou "!" que abre a dica), esse ícone precisa de um nome textual equivalente, não pode ser só o desenho (WCAG 1.1.1).
Nenhuma instrução ou referência ao conteúdo flutuante pode depender só de característica sensorial (WCAG 1.3.3).
Se o conteúdo flutuante impõe um limite de tempo — contagem regressiva, ou um popup que some sozinho depois de X segundos — o usuário precisa poder desligar, ajustar ou estender esse tempo (WCAG 2.2.1).
AA
Quando o conteúdo aparece no hover ou no foco, ele precisa ser dispensável, permanecer enquanto o cursor ou o foco continuam ali, e não sumir sozinho (WCAG 1.4.13).
O texto dentro do tooltip, popover ou popup precisa de contraste de pelo menos 4.5:1 contra o fundo do contêiner (WCAG 1.4.3).
A borda ou sombra que separa o contêiner do conteúdo atrás dele, e a seta (tip), precisam de pelo menos 3:1 contra a cor adjacente (WCAG 1.4.11).
Se o popover ou popup contém elementos interativos, o indicador de foco precisa estar visível em cada um deles (WCAG 2.4.7).
Os alvos interativos dentro do popover ou popup — incluindo o botão de fechar — precisam de no mínimo 24×24px (WCAG 2.5.8).
AAA
O texto dentro do contêiner com contraste de 7:1 (WCAG 1.4.6).
Os alvos interativos do popover ou popup, incluindo o fechar, com no mínimo 44×44px (WCAG 2.5.5).
O indicador de foco com espessura equivalente a um perímetro de 2px ao redor do elemento e contraste de 3:1 entre focado e não-focado (WCAG 2.4.13).
As interrupções podem ser adiadas ou suprimidas pelo usuário, exceto em emergências (WCAG 2.2.4).
Referências
https://componentes.design/aulas/tooltip
https://developer.apple.com/design/human-interface-guidelines/popovers
https://mobbin.com/glossary/popover
https://mobbin.com/glossary/tooltip
https://www.optimonk.com/ux-design-tips-popups-to-improve-user-experience
https://www.digioh.com/blog/mobile-design-best-practices-pop-ups