O que é um tooltip? Significado, tipos e boas práticas de UI

O que é um tooltip?

Um tooltip é uma pequena mensagem contextual que se prende a um elemento específico da interface (um botão, um campo de formulário, um item de menu ou um ícone) para explicar o que ele faz ou incentivar o usuário a interagir com ele. A característica que o define é a ancoragem: um tooltip aponta para uma parte real da interface em vez de flutuar no meio da tela, então a explicação fica bem ao lado daquilo que ela explica.

É essa proximidade que torna os tooltips tão eficazes. Quando a ajuda aparece diretamente ao lado do elemento em questão, o usuário não precisa traduzir uma instrução em um lugar na página; o tooltip já fez isso por ele. Um tooltip responde "o que é isto?" ou "o que eu faço aqui?" exatamente no ponto em que a dúvida surge.

Os tooltips são pequenos e pouco invasivos de propósito. Diferente de um modal, que toma conta da tela e pausa tudo até ser fechado, um tooltip deixa o resto do produto visível e utilizável. Isso faz dele a ferramenta natural para uma orientação leve e contextual: destacar uma funcionalidade, esclarecer um controle pouco familiar ou conduzir alguém ao próximo passo sem tirá-lo do fluxo.

A anatomia de um tooltip: uma seta ancorada em um elemento real, um título e uma mensagem curtos, um contador de etapas e uma forma clara de seguir em frente.

O que significa a palavra "tooltip"?

O termo vem dos primeiros softwares gráficos. Quando você passava o cursor sobre o pequeno ícone de uma ferramenta na barra de ferramentas (o pincel, a borracha, a ferramenta de corte), aparecia um rótulo minúsculo com o nome daquela ferramenta. Era, literalmente, uma "dica" (tip) sobre a "ferramenta" (tool), e assim nasceu o tooltip.

Durante anos, esse rótulo revelado pelo hover foi todo o significado da palavra. Mas, à medida que o software migrou para a web e os produtos ficaram mais complexos, o padrão se expandiu para abranger uma família bem maior de mensagens pequenas e ancoradas. Hoje, "tooltip" descreve qualquer mensagem compacta ligada a um elemento da interface, seja ela acionada pelo hover, pelo foco via teclado, por um clique ou exibida automaticamente como uma etapa de um fluxo de onboarding.

Então, quando alguém fala em "tooltip" hoje, pode estar se referindo a um rótulo de hover clássico sobre um ícone ou a uma mensagem in-app guiada que conduz um novo usuário por uma funcionalidade. A ideia de fundo é a mesma (uma explicação curta ancorada a algo na tela), mas o gatilho e a intenção se expandiram bastante.

Tipos de tooltip

Nem todos os tooltips se comportam da mesma forma. O que muda de um para outro é como ele é acionado, quanta atenção exige e qual função cumpre. Estes são os principais tipos que você vai encontrar.

1. Tooltip de hover

O clássico. O usuário passa o cursor sobre um elemento e um pequeno rótulo aparece; quando ele tira o cursor, o rótulo some. Tooltips de hover são perfeitos para nomear botões que só têm ícone ou oferecer um esclarecimento opcional de uma linha. O ponto fraco é que o hover não existe em telas sensíveis ao toque e pode passar totalmente despercebido, por isso eles nunca devem conter informações de que o usuário realmente precisa para concluir uma tarefa.

2. Tooltip de clique (ou de foco)

Em vez de aparecer no hover, este tooltip se abre quando o usuário clica em um alvo, geralmente um pequeno ícone de "?" ou de informação, e fica aberto até que ele o feche ou siga em frente. Como é acionado de forma deliberada, funciona em dispositivos touch e comporta um pouco mais de texto. É uma ótima escolha para ajudas do tipo "explique este campo" ao lado de um campo de formulário ou de uma configuração.

3. Tooltip de hotspot

Um hotspot é um pequeno ponto ou sinalizador que pulsa suavemente ao lado de uma funcionalidade. Ele não diz nada por si só; apenas convida a um clique, e o tooltip se abre quando o usuário interage. É o padrão de menor pressão: atrai o olhar com um movimento sutil sem interromper ninguém, o que o torna ideal para orientações opcionais e fáceis de descobrir, como uma funcionalidade recém-lançada ou um atalho para power users.

4. Tooltip de onboarding guiado

Esses tooltips são exibidos automaticamente como etapas de uma sequência, conduzindo um novo usuário por um fluxo de trabalho, uma mensagem ancorada de cada vez, muitas vezes com um contador de etapas ("2 de 5") e um botão Próximo. Aqui o tooltip é uma ferramenta de ensino, e não um rótulo passivo, e ele é a base da maioria dos product tours e dos fluxos de onboarding de usuários. Veja designs reais nos nossos exemplos de tooltips de onboarding.

5. Tooltip com máscara

Um tooltip com máscara escurece o resto da tela com uma sobreposição semitransparente e recorta um holofote em volta do elemento-alvo. É o padrão que mais exige atenção (todo o resto desaparece, tanto visual quanto cognitivamente), por isso é reservado para a etapa mais crítica de um fluxo, o momento que decide se um usuário é ativado ou faz churn. Por ser tão impositivo, deve ser usado com moderação.

Tooltip vs modal vs popover vs hotspot

Os tooltips costumam ser confundidos com outros padrões in-app que também aparecem sobre a interface. Veja como eles se comparam para escolher o mais adequado para cada situação.

Resumindo: o tooltip é o mais leve, pequeno, ancorado e nada invasivo. O popover é um primo mais robusto que comporta conteúdo mais rico. O modal interrompe de propósito para garantir que algo seja visto. E o hotspot é, na verdade, um gatilho que revela um tooltip sob demanda. Escolher entre eles é basicamente uma questão de quanta atenção o momento merece.

Boas práticas de UX para tooltips

Um tooltip é fácil de adicionar e fácil de usar mal. Estes são os princípios que separam os tooltips realmente úteis daqueles que os usuários aprendem a ignorar.

Ancore a um elemento real, no contexto

A força de um tooltip está na proximidade com aquilo que ele explica. Sempre o prenda ao botão, campo ou ícone específico que ele descreve; nunca o deixe flutuando no meio da tela, onde o usuário precisa procurar a que ele se refere.

Seja breve

Um tooltip é uma dica, não um artigo de ajuda. Uma frase clara vale mais que um parágrafo. Se você se pegar escrevendo três linhas de texto, é sinal de que precisa de um popover, de uma mensagem in-app mais completa ou de um link para a documentação, e não de um tooltip maior.

Nunca esconda informações essenciais atrás de um hover

Tooltips de hover não funcionam em telas sensíveis ao toque e passam despercebidos com facilidade quando se usa o mouse. Tudo o que o usuário precisa saber para concluir uma tarefa deve estar na própria interface; reserve os tooltips para ajudas realmente complementares.

Mostre um de cada vez

O erro mais comum com tooltips é disparar todas as dicas de uma vez na primeira tela. Uma parede de tooltips sobrecarrega, é fechada por reflexo e ensina o usuário a ignorar suas orientações pelo resto da jornada. Mostre um tooltip contextual de cada vez, ligado ao ponto em que o usuário realmente está.

Ajuste a atenção ao que está em jogo

Use padrões discretos (rótulos de hover, hotspots) para orientações opcionais e padrões mais intensos (etapas guiadas, máscaras) só para os momentos que decidem a ativação. Quando todas as etapas exigem atenção máxima, nenhuma delas recebe essa atenção.

Cuide da acessibilidade

Bons tooltips podem ser acessados pelo teclado (não só pelo hover), ficam visíveis tempo suficiente para serem lidos, não cobrem o elemento que descrevem e mantêm contraste de cor suficiente para continuarem legíveis. Usuários de leitores de tela devem receber as mesmas informações por meio de atributos ARIA adequados. Tooltips acessíveis não servem só para cumprir normas; eles ficam mais claros para todo mundo.

Como adicionar tooltips sem código com o Kompassify

Tradicionalmente, adicionar tooltips significava pedir a um desenvolvedor para integrar uma biblioteca, escrever o texto direto no código e fazer um novo deploy toda vez que você quisesse mudar uma palavra. Isso é lento e coloca a sua orientação in-app na fila do backlog de engenharia. Mas não precisa ser assim.

O Kompassify é uma plataforma no-code de onboarding de usuários que permite que times de produto, onboarding e customer success criem e publiquem tooltips sem mexer no código. Você instala um único snippet de JavaScript uma vez e, a partir daí, tudo é gerenciado pelo painel do Kompassify:

• Aponte e clique para ancorar. Selecione qualquer elemento do seu produto em produção e anexe um tooltip a ele, sem precisar escrever seletores CSS à mão.
• Escolha o gatilho e o estilo. Hover, clique, sinalizador de hotspot, etapa guiada ou holofote com máscara, com as suas próprias cores e textos.
• Encadeie em fluxos. Combine tooltips em um walkthrough de produto completo, segmentado por tipo de usuário.
• Meça e itere. Acompanhe o desempenho de cada tooltip e de cada fluxo e depois faça testes A/B do texto e da segmentação, tudo sem novo deploy.

Como nada fica fixo no código, você pode editar o texto de um tooltip, movê-lo para outro elemento ou desativá-lo por completo em segundos, e ele ajuda a oferecer o tipo de orientação contextual que aumenta a ativação de usuários e a descoberta de funcionalidades. O Kompassify está em conformidade com o GDPR, é hospedado na UE e é gratuito para até 100 usuários ativos mensais, então você pode lançar seus primeiros tooltips sem gastar nada.

Perguntas frequentes