Como adicionar um tooltip em um site WordPress sem programador
Uma dica contextual no WordPress: uma frase ao lado do elemento em que os visitantes hesitam, colocada com um clique no editor visual e mostrada exatamente quando ajuda.
- Tempo
- ● 10 minutos
- Preço
- Plano Free
- Quem faz
- Administrador do WordPress
Exemplo: um tooltip no WordPress
Uma loja WooCommerce vende templates digitais, e os clientes não acham os arquivos. Em /my-account um tooltip aponta para a aba Downloads: “Os seus arquivos estão aqui; os links não expiram”.
Grátis no plano Free do Clew, sem cartão e sem prazo: um site e até 3 tours ou tooltips publicados. Regras de público e testes A/B vêm com o Pro.
Como adicionar o tooltip no WordPress, passo a passo
- Passo 01
Copie o seu snippet do Clew
Crie uma conta grátis (ou entre), adicione o seu site e abra Visão geral no admin. Clique na linha do cartão O widget ainda não deu sinal. para copiar: ela já vem com a chave real do seu site no lugar do marcador.
<!-- Clew: troque COLE_AQUI_SUA_CHAVE pela chave do site em Admin > Visão geral --> <script src="https://tryclew.io/widget/COLE_AQUI_SUA_CHAVE.js" async></script>
Passo 1 · ilustração esquemática - Passo 02
Instale um plugin de código no cabeçalho
Em Plugins → Add New instale e ative o plugin gratuito WPCode (ou use a opção de “scripts no cabeçalho” do seu tema). Não edite o
header.php: as atualizações do tema sobrescrevem.
Passo 2 · ilustração esquemática - Passo 03
Cole a linha no campo Header
Abra Code Snippets → Header & Footer, cole a linha do Clew em Header e clique em Save Changes.
Passo 3 · ilustração esquemática - Passo 04
Limpe o cache
Se você usa WP Rocket, LiteSpeed Cache, W3 Total Cache ou uma CDN, limpe o cache. Nas opções de “atrasar JavaScript”, exclua
tryclew.io/widget.
Passo 4 · ilustração esquemática - Passo 05
Prenda o tooltip ao elemento
No Clew abra Fluxos → + Novo fluxo, mantenha Tooltips passo a passo e clique em Editar no seu site. Na sua página clique em Escolher elemento, clique no campo ou botão e escreva um título curto e uma frase. Ajuste Posição se a posição automática cobrir algo importante.
Passo 5 · ilustração esquemática - Passo 06
Escolha onde, quando e para quem aparece
No mesmo editor, preencha Onde mostrar (URL da página), Quando mostrar, Segmentação de público e Frequência. Estas são as configurações do exemplo acima:
Configuração Valor Formato Tooltips passo a passo Onde mostrar (URL da página) Seção por prefixo /my-accountQuando mostrar Assim que a página carregar Segmentação de público Sem regras: todo mundo que abre a página Frequência Uma vez por visitante 
Passo 6 · ilustração esquemática - Passo 07
Publique e confira no site real
Mude Status para Publicado e salve. Abra a página numa janela anônima: o Clew lembra quem já viu um item de “uma vez”, então o seu navegador de sempre pode pular. Visualizações, conclusões e abandonos aparecem nas estatísticas.
Passo 7 · ilustração esquemática
Armadilhas: tooltip no WordPress
“Atrasar JavaScript” esconde o tooltip até a interação
WP Rocket, LiteSpeed e Perfmatters podem adiar scripts até a primeira rolagem ou clique. O widget começa tarde e um item Assim que a página carregar parece quebrado. Adicione tryclew.io/widget às exclusões.
Atualizações de tema e plugins renomeiam abas e botões
O WooCommerce e os temas às vezes mudam a marcação das abas da conta e dos formulários de produto. Prenda a dica a um elemento com classe estável, como woocommerce-MyAccount-navigation-link--downloads, em vez da posição, e dê uma olhada em Saúde depois de atualizar plugins.
Prefira ids e atributos data
Se Escolher elemento sugerir uma cadeia longa de classes, escolha o elemento pai mais próximo com id ou peça um atributo data-tour: um seletor estável mantém a dica viva depois das atualizações do tema.
Perguntas e respostas
Funciona com construtores como o Elementor?
Sim. O Clew trabalha na página já renderizada; escolha o elemento com Escolher elemento, seja lá quem o tenha montado.
Funciona no WordPress.com?
Plugins como o WPCode precisam do plano Business do WordPress.com ou superior. WordPress auto-hospedado funciona em qualquer hospedagem.
Aparece no wp-admin?
Plugins de cabeçalho normalmente só adicionam código ao site público. Para guias dentro do /wp-admin, adicione a linha com um snippet para a área administrativa (o WPCode permite escolher).
O tooltip é grátis?
Sim, no plano Free: até 3 tours e tooltips publicados num site.
Dá para abrir a dica só no clique?
Sim. Escolha Ao clicar num elemento, informe o seletor do ícone ou link que abre a dica e coloque A cada visita.
O que mais dá para adicionar no WordPress
- Como colocar um pop-up em um site WordPress sem programador
- Como criar um tour do produto no WordPress sem programador
- Como criar um guia interativo do produto no WordPress sem programador