Uma dica de contexto, um pequeno elemento de interface que ou salva o utilizador ou o irrita profundamente. Passa o cursor sobre um ícone, à espera de uma sugestão, e em vez disso recebe: um quadrado vazio, texto truncado ou uma janela que fugiu para fora do ecrã.

Escrever dicas de contexto manualmente significa lutar com posicionamento, z-index, design responsivo e animação. As bibliotecas prontas a usar resolvem tudo isto com um par de linhas de código. Mas qual escolher quando o mercado tem dezenas de opções, desde pequenos fragmentos de CSS a frameworks completas para visitas guiadas ao produto?

Reunimos 21 plugins open-source para dicas de contexto em JavaScript, jQuery e puro CSS, com capturas de ecrã reais e análises honestas das capacidades. Aqui estão ferramentas para qualquer cenário: uma dica rápida para uma landing page, uma dica com conteúdo HTML para uma aplicação web e integração passo a passo para SaaS.

💡 Visão geral rápida:

• Escolha uma categoria: CSS puro, jQuery ou JavaScript vanilla.
• Decida o que vai dentro: apenas texto ou HTML com imagens e botões.
• Verifique o posicionamento automático: para que a dica não saia do ecrã.
• Para visitas guiadas ao produto, use Intro.js ou Hopscotch, são feitos para integração.

Tabela de visão geral: 21 plugins em 30 segundos

1. Tippy.js

O Tippy.js é o padrão de facto para dicas de contexto no frontend moderno. A biblioteca do developer atomiks é construída sobre o Popper.js (mais tarde, Floating UI) e oferece um posicionamento impecável: a dica desvia-se sozinha dos limites do ecrã, inverte-se e ajusta-se à janela de visualização.

Por dentro, tudo o que precisa para uma UI a sério: animação via transições CSS, dicas interativas (pode clicar no conteúdo sem fechar), seguimento do cursor, dicas aninhadas e renderização lazy. Suporta React, Vue e DOM puro.

Na nossa experiência, deve mudar para o Tippy.js quando um projeto ultrapassa o zoo do jQuery: a biblioteca elimina a maior parte das dores de cabeça com o posicionamento sem uma única linha de CSS manual.

Vantagens: árvore de dependências mínima, tipagem TypeScript de raiz, documentação com exemplos ao vivo. Desvantagens: exagerado para uma simples dica de texto numa landing page; tamanho do bundle ~30 KB (embora o tree-shaking ajude).

🔗 Tippy.js no GitHub🔗 Documentação e demonstração

2. Tooltipster

O Tooltipster é um veterano entre os plugins jQuery para dicas de contexto que não se tornou obsoleto. A biblioteca funciona desde 2012 e ainda recebe atualizações. A principal característica são quatro temas de estilo prontos a usar (padrão, claro, sem bordas, punk) mais a capacidade de criar o seu próprio via CSS.

O Tooltipster lida com conteúdo HTML, carregamento AJAX, múltiplos gatilhos (hover, clique, foco, chamada programática), temporizadores de mostrar/ocultar e callbacks para cada etapa do ciclo de vida. Um ponto positivo adicional é o suporte integrado para dispositivos táteis: tocar num elemento mostra a dica, tocar novamente esconde-a.

Na prática, o Tooltipster encaixa bem em projetos em WordPress e na stack jQuery, onde puxar um bundle moderno do npm é inconveniente: basta ligar o script, configurar as opções e todos os links com title transformam-se em dicas agradáveis.

Vantagens: plugin maduro com comportamento previsível, documentação excelente, suporte tátil. Desvantagens: dependente do jQuery (em 2026 isto já é uma dependência que muitos querem remover).

🔗 Tooltipster no GitHub

3. CSS Tooltip

Tooltip minimalista em CSS puro: um elemento HTML com data-tooltip, pseudoelementos ::before e ::after para a seta e o fundo, além de uma transição suave ao passar o rato. Sem JavaScript, nem sequer são necessários manipuladores de eventos.

A solução é adequada para conteúdo estático: blogues, documentação, páginas de destino. Pesa menos de um kilobyte, não requer dependências e não afeta o First Input Delay. Basta copiar o snippet de CSS para o projeto e colocar os atributos data.

Vantagens: zero JS, desempenho instantâneo, fácil de personalizar cores e espaçamentos. Desvantagens: apenas texto, sem posicionamento automático, comportamento limitado em dispositivos móveis (sem hover).

4. Tipr

O Tipr é um pequeno plugin jQuery (menos de 2 KB minificado) que faz exatamente uma coisa: mostra uma tooltip popup ao passar o rato sobre qualquer elemento HTML. Design plano, sem serifas, configuração mínima através de atributos data.

Ideal quando precisa que «simplesmente funcione» sem abstrações desnecessárias. Suporta quatro posições, classes personalizadas e alternância de gatilho. O nosso conselho é usar o Tipr para projetos pequenos onde o jQuery já existe e não quer adicionar uma dependência separada para tooltips.

Vantagens: tamanho microscópico, API simples, não requer configuração. Desvantagens: abandonado pelo autor, posicionamento primitivo (pode ser cortado no limite do ecrã).

O Tipr está disponível no GitHub

5. CSS tooltip appear

Outra implementação em CSS puro, desta vez com ênfase na animação de aparecimento. A tooltip desliza suavemente para fora, com duração e curva de easing personalizáveis. Adequada para situações em que a função não é tão importante quanto a impressão visual: portefólios, páginas promocionais, sites de apresentação.

Vantagens: animação bonita, CSS puro, sem scripts. Desvantagens: apenas texto, sem posicionamento nos limites do ecrã, sem interatividade.

6. Grumble.js

O Grumble.js destaca-se visualmente: a tooltip é estilizada como um balão de banda desenhada e pode rodar em torno do elemento alvo 360 graus em incrementos de 1°. O programador James Cryer criou o plugin especificamente para interfaces não padronizadas, onde um retângulo comum pareceria deslocado.

O plugin não é atualizado há muitos anos, mas como conceito e para projetos pessoais continua a ser interessante. Não o colocaríamos em produção num projeto ativo: versão desatualizada do jQuery nas dependências e sem suporte para dispositivos móveis.

Vantagens: design único, controlo preciso do ângulo, animação agradável. Desvantagens: sem suporte, jQuery antigo, sem design responsivo.

🔗 Grumble.js no GitHub

7. Protip

O Protip é um plugin jQuery que se posicionou como «uma tooltip para qualquer situação». Vários skins (incluindo tema escuro), transições animadas, quatro posições e suporte a HTML. Com base no repositório, o autor implementou uma API com foco na extensibilidade: é possível fazer cascata de configurações e definir padrões globais.

Na prática, o Protip é uma opção sólida de gama média para projetos jQuery. Não é tão poderoso como o Tooltipster, mas é suficiente para cenários básicos.

Vantagens: vários temas, API conveniente, animação. Desvantagens: repositório não atualizado, documentação escassa.

O Protip está disponível no GitHub

8. Tipped

Tipped é uma biblioteca JavaScript leve e sem dependências. Suporta vários temas, tamanhos e variantes de interação: hover, clique, foco, chamada manual. O posicionamento é fixo (quatro lados), sem ajuste inteligente aos limites do ecrã; para interfaces simples, isto é suficiente.

Note que a biblioteca não é atualizada há muito tempo e o suporte da comunidade é mínimo. Em 2026, para um projeto novo, recomendaríamos Tippy.js, mas se o projeto já usa Tipped e funciona, não há motivo para mudar.

Prós: sem dependências, API simples, vários temas. Contras: sem posicionamento automático, projeto parece abandonado.

Tipped está disponível no GitHub

9. Microtip

Microtip, do programador Indrashish Ghosh, é uma biblioteca de tooltips em CSS puro que pesa menos de 1 KB comprimido. Acessibilidade pronta a usar (aria-label + role="tooltip"), animação por GPU (transform em vez de top/left), tipografia responsiva.

O nosso cenário preferido para o Microtip são ícones sem etiquetas num painel de administração ou interface: coloca-se o aria-label, adiciona-se uma classe e o utilizador recebe uma dica sem uma única linha de JavaScript. A biblioteca é ativamente usada em projetos no GitHub (mais de 3,5k estrelas), embora não tenha havido grandes atualizações nos últimos dois anos.

Prós: ultra-leve, pronto para acessibilidade, não atrasa a renderização. Contras: apenas texto, sem interatividade, posição fixa.

🔗 Microtip no GitHub

10. Auto Tooltips

Auto Tooltips é uma biblioteca JavaScript que escolhe automaticamente a posição ideal para uma tooltip em função do espaço disponível. Ao contrário do Microtip ou do CSS Tooltip, aqui a dica pode saltar para outro lado do elemento se não houver espaço suficiente no limite do ecrã.

Visualmente, tooltips estilizadas com sombra e cantos arredondados. A lógica de posicionamento foi escrita sem dependências externas; a biblioteca inteira cabe em poucos kilobytes.

Prós: posicionamento automático, leve, design elegante. Contras: repositório inativo, documentação mínima.

11. JBox

JBox não é apenas uma tooltip, mas uma estrutura universal de diálogos baseada em jQuery. Além de dicas pop-up, trata de janelas modais, notificações (notice) e sobreposições em ecrã inteiro. Cada tipo de diálogo é um plugin separado dentro de uma arquitetura comum.

Na nossa experiência, o JBox é adequado em projetos onde é necessário um estilo visual unificado para todos os elementos pop-up. A biblioteca suporta conteúdo AJAX, animação, callbacks e posicionamento responsivo. O tamanho justifica-se pela funcionalidade: cerca de 20 KB para um conjunto completo de componentes de diálogo.

Prós: quatro tipos de diálogo num só pacote, boa documentação, suporte ativo. Contras: dependência do jQuery, excessivo se apenas precisa de tooltips.

🔗 JBox no GitHub

12. Wenk

Wenk (do hindi, «pirilampo») é uma biblioteca de tooltips em CSS que usa atributos de dados para o posicionamento. Pode definir a posição (data-wenk="left"), o comprimento e o estilo da seta. Toda a magia está em CSS puro, mais um ficheiro JS opcional para seleção automática de posição.

O peso é de cerca de 1,2 KB minificado. Excelente escolha quando o Microtip parece demasiado minimalista e não quer incluir o Tippy.js.

Prós: atributos de dados para posição, auxiliar JS leve, design agradável. Contras: sem tooltips interativas, posicionamento limitado a oito direções.

Wenk está disponível no GitHub

13. Crumble

Crumble é uma sobreposição baseada no Grumble.js, que adiciona um efeito de bolha a «esfarelar-se» ao fechar. Conceito visualmente interessante, mas a dupla dependência (jQuery + Grumble.js) e a ausência total de atualizações tornam-no exclusivamente uma peça de museu histórico.

Incluímos o Crumble na coleção para completude e diversidade visual, mas para um projeto real procure alternativas mais vivas.

Prós: animação de fecho única, chama a atenção. Contras: duas dependências desatualizadas, não adequado para produção.

🔗 Grumble.js (dependência)

14. Intro.js

Intro.js já não é uma tooltip, mas uma estrutura completa para integração de utilizadores. Com a biblioteca, criam-se instruções passo a passo: destaque de elementos, janela pop-up com explicação, botões «Seguinte»/«Concluído». Sem dependências, JavaScript puro.

No nosso teste, o Intro.js revelou-se a ferramenta mais madura para tours de produto: mais de 23 mil estrelas no GitHub, base de código TypeScript, suporte para tours com várias páginas (com transferência de estado entre páginas), personalização através de classes CSS e callbacks para cada passo.

Prós: padrão de facto para tours de integração, desenvolvimento ativo, documentação detalhada. Contras: cerca de 45 KB, justificado pela funcionalidade, mas excessivo para uma simples tooltip.

🔗 Intro.js no GitHub🔗 Demonstração ao vivo

15. PowerTip

O PowerTip, de Steven Benner (autor do jQuery QueryBuilder), traz um conceito interessante: um sistema de regras garante que apenas uma dica de contexto esteja visível no ecrã de cada vez. Isto resolve o problema clássico de quando um utilizador move rapidamente o cursor sobre vários elementos e obtém uma confusão de sugestões sobrepostas.

O plugin suporta marcação complexa dentro da dica (incluindo conteúdo AJAX), acionadores personalizados e posicionamento em oito direções. Em projetos jQuery, o PowerTip é uma das opções mais fiáveis.

Vantagens: sistema de exibição inteligente, conteúdo HTML, funcionamento estável. Desvantagens: dependência do jQuery, repositório recebe atualizações raras.

🔗 PowerTip no GitHub

16. Toolbar.js

O Toolbar.js, de Paul Kinzett, é uma abordagem de «dica como barra de ferramentas»: a janela popup contém não apenas texto, mas botões, ícones, links. O cenário típico é selecionar texto numa página e aparecer um painel com botões «Copiar», «Partilhar», «Pesquisar».

O plugin utiliza o Popper.js para posicionamento, o que garante um comportamento correto nos limites do ecrã. O projeto reuniu mais de 2,3 mil estrelas, mas não tem havido grandes atualizações nos últimos anos. Conceptualmentemente, o Toolbar.js influenciou muitos padrões de IU modernos (painéis de seleção ao estilo do Medium).

Vantagens: abordagem única de «dica como painel de ações», bom posicionamento. Desvantagens: projeto congelado, vinculado a uma versão antiga do Popper.js.

🔗 Toolbar.js no GitHub

17. Simptip

O Simptip é uma biblioteca de dicas de contexto em CSS escrita em Sass, utilizando mixins e variáveis. Isto torna-a conveniente para projetos onde a aparência da dica deve corresponder exatamente ao sistema de design: altere a variável $bg-color e todas as dicas mudam de cor.

A biblioteca suporta setas suaves e nítidas, quatro posições e efeito de aparecimento (fade-in). O peso é mínimo: o CSS compilado tem cerca de 2 KB.

Vantagens: variáveis Sass para personalização, design cuidado, leve. Desvantagens: sem conteúdo HTML, projeto não atualizado.

🔗 Simptip no GitHub

18. HubSpot Tooltip

A HubSpot disponibilizou em código aberto a sua biblioteca interna de dicas de contexto, construída sobre o Tether (motor de posicionamento, antecessor do Popper.js) e o Drop (biblioteca para elementos dropdown). A combinação proporciona um sistema de dicas poderoso e flexível com posicionamento automático.

Atualmente, o HubSpot Tooltip tem sobretudo interesse histórico: a biblioteca não é atualizada, o Tether foi oficialmente substituído pelo Popper.js (e depois pelo Floating UI). No entanto, as decisões arquitetónicas da HubSpot influenciaram bibliotecas modernas; a própria abordagem «motor de posicionamento + motor de exibição» tornou-se padrão.

Vantagens: qualidade de código industrial, bom posicionamento, suporte a HTML. Desvantagens: dependências desatualizadas (Tether), projeto congelado.

🔗 HubSpot Tooltip no GitHub

19. Hopscotch

O Hopscotch é a segunda framework, depois do Intro.js, para criar tours de produto. A abordagem é diferente: em vez de uma cadeia de elementos DOM, descreve-se o tour como um objeto JSON (passos, alvos, conteúdo) e a biblioteca trata da renderização e navegação por si própria. Suporta tours em várias páginas: o utilizador segue um link e o tour continua a partir do mesmo passo.

O projeto passou para a alçada da organização broccolijs-archive e está congelado. Para um produto novo, recomendamos o Intro.js, mas se der suporte a código legado com Hopscotch, ele ainda funciona e está documentado.

Prós: descrição do tour em JSON, suporte para várias páginas, API madura. Contras: projeto arquivado, sem novas funcionalidades.

Hopscotch no GitHub (projeto arquivado)

20. Darktooltip

O Darktooltip é um plugin jQuery com um design escuro fixo, suporte para conteúdo HTML e animação de aparecimento. A API é simples: chama-se .darktooltip() num elemento, passam-se as opções e está feito. Adequado para pequenos widgets e painéis de administração onde é preciso uma dica consistente e rápida sem mexer em CSS.

Na nossa experiência, o Darktooltip é uma ferramenta de nicho: se o tema escuro se adequar ao design, funciona bem; se precisar de personalização de cores, é mais fácil usar o Tooltipster ou o Tippy.js.

Prós: API simples, conteúdo HTML, animação agradável. Contras: apenas tema escuro, dependência do jQuery, projeto inativo.

🔗 Darktooltip no GitHub

21. Tipso

O Tipso fecha a coleção como um agradável plugin jQuery leve com animação CSS3. Design responsivo de raiz (a dica muda de tamanho em dispositivos móveis), vários gatilhos e posições, suporte HTML. Note-se, à parte, que o Tipso existe como um plugin para WordPress, o que pode ser conveniente para proprietários de sites WordPress que não querem mexer em código.

A biblioteca não é atualizada há vários anos, mas a base de código é estável e não tem bugs críticos. Para projetos jQuery simples, é uma opção viável.

Prós: responsividade, versão WordPress, animação agradável. Contras: não é atualizado, dependente do jQuery.

🔗 Tipso no GitHub

Como testámos e como escolher a sua dica

Passámos cada plugin pela mesma lista de verificação: carregamento numa página vazia, renderização no limite do ecrã, comportamento com mudanças rápidas de hover, toque em dispositivos móveis, personalização de cor/tipo de letra. As classificações na tabela acima não são «estrelas» abstratas, mas resultados diretos destes testes.

Para uma seleção rápida, guarde esta matriz de correspondência:

• Landing page, blog, documentação → Microtip ou Wenk. CSS puro, carregamento instantâneo, nada supérfluo.
• Painel de administração em jQuery, site WordPress → Tooltipster. Maduro, estável, com suporte para toque.
• Aplicação web moderna, React/Vue → Tippy.js. Melhor posicionamento do mercado, TypeScript, desenvolvimento ativo.
• Janelas de diálogo + dicas + notificações num só pacote → JBox. Estilo unificado para todos os popups.
• Tour de produto, integração, instruções passo a passo → Intro.js. Padrão da indústria, mais de 23 mil estrelas, tours em várias páginas.

Regra geral que extraímos dos testes: em caso de dúvida, use o Tippy.js. Ele cobre a grande maioria dos cenários, não arrasta o jQuery e resolve o problema de posicionamento de uma vez por todas. E se o projeto já estiver em jQuery e não houver orçamento para migração, o Tooltipster não o deixará ficar mal.

Vídeo: como criar uma dica bonita em CSS puro

Para ver as dicas em ação, veja este tutorial do AlgoKage. Em 10 minutos, construirá uma dica popup elegante sem uma única linha de JavaScript:

⁉️🤔 Perguntas frequentes

É necessário JavaScript para dicas?

Não é obrigatório. Para uma dica de texto simples em desktop, o CSS é suficiente (Microtip, Wenk, Simptip). Mas se precisar de conteúdo HTML, posicionamento automático nos limites do ecrã, gatilho de clique ou suporte para dispositivos móveis, não pode prescindir do JavaScript. O Tippy.js e o Tooltipster cobrem estes cenários.

Qual a importância da acessibilidade (a11y) nas dicas?

Crítica. Os utilizadores de leitores de ecrã devem receber o texto da dica sem passar o cursor. A abordagem correta: usar aria-describedby no gatilho e role="tooltip" na própria dica. O Tippy.js e o Microtip suportam isto de raiz. Se estiver a escrever a sua própria dica, não ignore o WAI-ARIA.

Em que é que o Tippy.js é melhor do que o antigo Tooltipster?

O Tippy.js não depende do jQuery, é escrito em TypeScript, usa Floating UI para posicionamento (a dica permanece sempre dentro da janela de visualização) e suporta tree-shaking. O Tooltipster é maduro e estável, mas a dependência do jQuery em 2026 é indesejável para novos projetos. Se já tiver uma stack jQuery, o Tooltipster é uma excelente escolha; se começar do zero, Tippy.js.

Pode usar-se várias bibliotecas de dicas no mesmo site?

Tecnicamente sim, mas na prática isso cria conflitos de estilos, duplicação de código e confusão na depuração. A exceção é o Microtip para ícones + Intro.js para tour de produto: as suas áreas de responsabilidade não se sobrepõem. Em geral, escolha uma biblioteca para o cenário principal.

Porque é que as dicas são cortadas em dispositivos móveis?

Os dispositivos móveis não têm hover e a sua janela de visualização é estreita. As dicas que aparecem à direita de um elemento no desktop podem sair do ecrã no móvel. Solução: ou posição responsiva (o Tippy.js pode escolher automaticamente o lado) ou substituir a dica por um popover clicável para dispositivos móveis.

Deve usar-se o Grumble.js ou o Crumble num projeto real?

Não. Ambas as bibliotecas não são atualizadas há mais de 10 anos e dependem de uma versão desatualizada do jQuery. Visualmente, são interessantes como conceitos, mas para produção use análogos modernos: o Tippy.js com um tema personalizado pode imitar qualquer estilo visual sem dependências desatualizadas.

Que plugin de dicas escolher em 2026?

Vinte e um plugins é muito para escolher, mas verdadeiramente universais entre eles são três: Microtip para dicas CSS ultra leves, Tooltipster para projetos jQuery e Tippy.js para tudo o resto. O Intro.js está à parte, não é uma dica, mas uma framework para integração e, no seu nicho, é a melhor.

Os restantes dezoito são ou ferramentas de nicho para um design específico (Darktooltip, Simptip), ou artefactos históricos que influenciaram a indústria (Grumble.js, HubSpot Tooltip), ou projetos sólidos mas congelados que ainda funcionam, embora para código novo seja melhor usar algo vivo.

Se leu até este ponto, a coleção cumpriu a sua tarefa: agora sabe qual o plugin a usar para o seu projeto. Pegue nele e experimente; todos os links para documentação e repositórios estão na descrição de cada ferramenta.