Resumo de IA
Quer adicionar tooltips ao seu formulário? Tooltips são pequenas caixas que aparecem quando você passa o mouse sobre uma área do seu site WordPress, e são ótimas para adicionar informações extras sobre um campo sem sobrecarregar o visual.
Neste post, mostraremos como adicionar tooltips no WordPress.
Neste Artigo
- O que é um Tooltip no WordPress?
- Instalando um Tooltip no WordPress Sem Plugin
- Passo 1. Crie um Formulário WordPress
- Passo 2. Instale o Plugin Shortcodes Ultimate
- Passo 3: Obtenha seu Shortcode de Tooltip
- Passo 4: Adicione seu Tooltip ao seu Formulário
- Passo 5: Personalize seu Tooltip
- Passo 5: Transforme seu Tooltip em um Ícone (Opcional)
- Considerações Finais
Crie Seu Formulário WordPress Agora
O que é um Tooltip no WordPress?
Tooltips são dicas, termos de glossário ou mensagens que aparecem quando seu visitante passa o mouse ou toca (em dispositivos móveis) em um elemento do seu site WordPress. E em seus formulários WordPress, tooltips podem ser usados para adicionar informações extras sobre um campo específico.
Por exemplo, veja a captura de tela abaixo.
O WPForms permite que você adicione facilmente uma descrição para cada campo no construtor de formulários. Diferente de uma descrição de campo típica, os tooltips ficam ocultos por padrão. Ele só aparece quando seu usuário deseja saber mais detalhes sobre um determinado campo, passando o mouse sobre a descrição do campo.
Adicionar um tooltip é uma ótima ideia se você deseja fornecer mais detalhes sobre um campo específico sem criar distrações desnecessárias em seu formulário.
Agora que você sabe o que é um tooltip, continue lendo para descobrir como adicioná-los ao seu site.
Instalando um Tooltip no WordPress Sem Plugin
Sim, é possível instalar um tooltip no WordPress sem um plugin. No entanto, se você não quiser usar um plugin de tooltip para adicionar facilmente um tooltip ao seu site WordPress, você precisará ser um usuário avançado e usar html ou jquery (ou contratar um desenvolvedor para fazer isso por você).
Felizmente, você pode economizar tempo e dinheiro usando um plugin de tooltip. Para usuários do WPForms, recomendamos o gratuito plugin Shortcodes Ultimate.
O Shortcodes Ultimate é fácil de usar e funciona muito bem com os temas WordPress mais populares e melhores.
Este plugin WordPress incrivelmente útil e gratuito lhe dará mais de 50 shortcodes para usar e adicionar facilmente várias funções ao seu site, incluindo o shortcode de tooltip. Em seguida, mostraremos exatamente como adicionar este plugin de tooltips para WordPress.
Como Adicionar Tooltips no WordPress
Vamos dar uma olhada no guia passo a passo sobre como adicionar tooltips no WordPress.
Passo 1. Crie um Formulário WordPress
A primeira coisa que você precisa fazer é instalar e ativar o WPForms em seu site. Se precisar de ajuda, confira este guia sobre como instalar um plugin do WordPress.
Em seguida, você precisará criar um formulário simples no WordPress.
Ótimo trabalho ao criar seu formulário. Voltaremos a ele em um passo posterior.
Passo 2. Instale o Plugin Shortcodes Ultimate
Em seguida, clique aqui para ir ao WordPress e baixar o plugin gratuito Shortcodes Ultimate.
Ou, se você já estiver no seu painel do WordPress, clique em Plugins » Adicionar Novo, pesquise por Shortcodes Ultimate e clique em Instalar Agora.
Após o plugin ser ativado, você estará pronto para começar a usá-lo.
Passo 3: Obtenha seu Shortcode de Tooltip
Agora, encontre o plugin Shortcodes Ultimate no lado esquerdo do seu painel do WordPress e clique em Shortcodes disponíveis. Role a página para baixo e selecione o botão Tooltip.
Na próxima página, destaque e copie o shortcode:
Passo 4: Adicione seu Tooltip ao seu Formulário
Agora que você tem seu shortcode de tooltip, é hora de adicioná-lo ao seu Formulário de Contato Simples.
Volte ao seu formulário clicando em WPForms » Todos os Formulários e, em seguida, selecione Editar no formulário onde você gostaria de adicionar seu tooltip.
Uma vez no formulário, clique no campo ao qual você gostaria de adicionar seu tooltip e cole seu shortcode de tooltip na caixa de descrição.
Após salvar seu formulário e visualizá-lo no frontend, ele agora exibirá o tooltip:
Passo 5: Personalize seu Tooltip
Você também pode modificar o código para exibir seu próprio texto. Aqui está um exemplo com as alterações feitas em negrito:
[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="This is the content area which will be shown in the Tooltip bubble after the user hovers over it!" behavior="hover" close="no" class=""]This is the text that will be always be displayed and will show the Tooltip content when hovered over![/su_tooltip]
Você também pode alterar várias opções diferentes nas configurações do seu tooltip, que você pode encontrar rolando até o final da página Shortcodes » Shortcodes disponíveis, como:
- Estilo + Cores
- Posição
- Tamanho
- Comportamento
- E mais
O próximo passo é opcional, mas fará com que seu tooltip pareça ainda mais personalizado e manterá seus formulários ainda mais limpos e sem distrações.
Passo 5: Transforme seu Tooltip em um Ícone (Opcional)
A menos que você declare especificamente e convide as pessoas a passar o mouse sobre seu tooltip em seu shortcode de tooltip, seus visitantes podem nem perceber que há conteúdo extra esperando para ser mostrado nesse tooltip! Uma ótima maneira de garantir que seus leitores passem o mouse sobre o tooltip é transformá-lo em um ícone em vez de apenas usar texto.
Por exemplo, muitas pessoas adicionam um ícone de informação "i" e, em seguida, quando o usuário passa o mouse sobre esse ícone, o tooltip é exibido. Que legal, não é?
Para fazer isso, primeiro, baixe e ative o plugin gratuito Better Font Awesome. Se você pulou direto para esta parte do post, aqui está um link para como instalar um plugin do WordPress, caso precise.
Após o plugin ser ativado, você terá acesso a milhares de ícones gratuitos que você pode usar em qualquer lugar do seu site WordPress com um simples shortcode. Agora, vamos adicionar o shortcode do ícone de Informação ao nosso tooltip.
Estamos prestes a colocar o shortcode de um plugin dentro do shortcode de outro plugin. Mas não se preocupe, ambos ainda funcionarão!
Volte à caixa de descrição do campo do seu formulário que contém seu tooltip e simplesmente substitua o texto exibido dentro do seu shortcode de tooltip por este shortcode:
[icon name="info"]
A área de texto que você deve substituir pelo shortcode acima está destacada abaixo:
E aqui está como o código deve ficar depois de adicionar o shortcode do ícone:
Alternativamente, você pode simplesmente copiar e colar o shortcode abaixo na sua caixa de descrição e ajustá-lo ao seu gosto.
[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="Tooltip text" behavior="hover" close="no" class=""][icon name="info"][/su_tooltip]
Em seguida, salve seu formulário e confira no frontend para ver o ícone do seu tooltip.
Ótimo trabalho! Agora, se você quiser ir ainda mais longe e colocar o ícone de dica de ferramenta acima do campo, ao lado do rótulo, confira nosso tutorial detalhado sobre como adicionar ícones a formulários do WordPress.
Considerações Finais
É isso! Agora você sabe como adicionar dicas de ferramenta no WordPress.
Se você quiser mudar a aparência dos botões dos seus formulários, leia como personalizar estilos de botões com CSS. Ou, se preferir, veja nosso guia sobre como estilizar o WPForms com CSS Hero (sem necessidade de codificação).
O que você está esperando? Comece hoje mesmo com o melhor plugin de formulários do WordPress.
Se você gostou deste artigo, siga-nos no Facebook e Twitter para mais tutoriais gratuitos do WordPress.
É possível adicionar várias Dicas de Ferramenta com mensagens diferentes?
Obrigado
Olá!
Claro, você pode criar dicas de ferramenta diferentes para campos diferentes, no entanto, um campo só pode ter uma dica de ferramenta, pois assim que você passar o mouse sobre ele, apenas uma dica de ferramenta poderá ser exibida.
Espero que isso faça sentido.
Tenha um bom dia 🙂
Como você pode adicionar uma dica de ferramenta a um ícone ou imagem no WordPress?
Olá Joshu!
Você pode simplesmente cobrir uma tag HTML de imagem ou ícone com o shortcode de Dica de Ferramenta, de acordo com as instruções fornecidas neste tutorial.
Espero que isso ajude.
Tenha um bom dia 🙂
Olá, obrigado pela dica.
Eu acho que o formulário ficaria mais organizado se o ícone de dica de ferramenta fosse posicionado ao lado do rótulo do campo, em vez de no final de cada campo, como você tem na seção de configurações do seu formulário com a dica de ferramenta de ícone de ponto de interrogação. Se você fez dessa forma, acho que você também concorda que é melhor. Como conseguimos um efeito semelhante?
Olá Chris!
Você pode tentar colocar o shortcode de Dica de Ferramenta no campo Rótulo. Eu não testei pessoalmente, mas você pode tentar.
Espero que isso ajude!
Tenha um bom dia 🙂
Funciona, mas então todo o código e a descrição da dica de ferramenta aparecem no seu e-mail e podem ser difíceis de ler.
Olá Gareth.
Nesse caso, você pode tentar usar as Smart Tags dos campos nas configurações de Notificação em vez da opção {all_fields}.
E caso ajude, temos um ótimo tutorial sobre como usar Smart Tags no e-mail de notificação.
Ao usar Smart Tags, ele não adicionará automaticamente o rótulo do campo, apenas o seu valor, então você terá que adicionar os rótulos manualmente.
Espero que isso ajude.
Tenha um bom dia 🙂
Olá, eu quero adicionar um ícone de dica de ferramenta após o rótulo, mas quando coloco o [shortcode de tooltip] nesta seção, ele o reconhece apenas como texto simples. existe alguma solução alternativa?
Olá Sina – Atualmente, o campo de rótulo não suporta shortcode, apenas o campo de descrição suporta shortcode. Se você precisar dele no campo de rótulo, nossa equipe de suporte poderá ajudar com algum código personalizado. Se você for um usuário com licença paga, pode abrir um ticket de suporte aqui.
Tenha um bom dia 🙂
Olá…
Posso usar isso para títulos de colunas no woocommerce?
Obrigado.
Olá Octavio – Peço desculpas, mas não oferecemos suporte a nenhuma integração com o WooCommerce, principalmente porque eles são fortemente integrados com seus próprios sistemas de formulários.
Se você precisar que os formulários funcionem dentro do WooCommerce, sugiro que entre em contato diretamente com a equipe do Woo para ter certeza de que encontrará uma opção que se integre corretamente ao sistema deles.
Obrigado 🙂
Olá,
Estou tentando adicionar os tooltips ao meu site, mas não está funcionando. O shortcodes ultimate não tem shortcodes disponíveis, a menos que eu pesquise em sua documentação. Seria essa a causa?
Olá – Posso alterar a cor e o tamanho do tooltip do ícone? Que código eu precisaria para isso?
Olá Emma,
Boa pergunta! Por favor, consulte este guia do Shortcode Ultimate para formatar o texto.
Espero que ajude! 🙂
Como posso fazer um tooltip aparecer se o usuário não preencheu um campo. Eu sei que já existe essa mensagem, mas ela é bem pequena e muitas pessoas ficam confusas ao preencher o formulário. Idealmente, eu gostaria que ele piscasse de alguma forma.
Olá Myur – Embora atualmente não tenhamos a opção de mostrar a mensagem no tooltip, se preferir, você pode aumentar o tamanho da fonte da mensagem de validação usando o seguinte CSS:
div.wpforms-container-full .wpforms-form em.wpforms-error {font-size: 16px !important; /* Por favor, altere os valores de acordo com sua preferência */
}
Caso ajude, você pode dar uma olhada em nossa documentação aqui para adicionar CSS personalizado.
Você também pode exibir uma mensagem de campo obrigatório no placeholder, como mostrado nesta captura de tela.