Você já viu dicas de ferramentas em todos os lugares Passe o mouse sobre um ícone da barra de ferramentas no Google Docs e um pequeno rótulo informa o que esse botão faz Isso é uma dica de ferramenta No WordPress, as dicas de ferramentas permitem adicionar dicas curtas que aparecem quando alguém passa o mouse (ou clica) em um elemento da sua página Sem imóveis de página extra, sem layout desordenado.
Master Addons para Elementor oferece duas maneiras de adicionar dicas de ferramentas: o Elemento Tooltip, um widget independente que você coloca na página, e o Extensão ToolTIP, que anexa uma dica de ferramenta a qualquer widget, seção ou contêiner Elementor que já exista Este guia cobre ambos os métodos, quando usar cada um e como estilizá-los.
Índice
O que são dicas de ferramentas e por que elas são importantes?
Uma dica de ferramenta é uma mensagem curta que aparece quando um visitante passa o cursor sobre um elemento específico da sua página Em sites WordPress, as dicas de ferramentas servem a alguns propósitos práticos:
- Explique os termos sem quebrar o fluxo. Se o seu conteúdo usar jargão, uma dica de ferramenta permite que os leitores obtenham uma definição rápida no hover sem interromper o parágrafo.
- Adicionar contexto a imagens e ícones. Quando você exibe ícones de produtos, fotos de membros da equipe ou ícones de recursos, uma dica de ferramenta fornece detalhes extras sem ocupar espaço visual.
- Mantenha as páginas limpas. Em vez de enfiar cada informação no layout visível, as dicas de ferramentas escondem detalhes secundários até que o leitor realmente os queira.
- Melhorar engajamento. Elementos interativos como dicas de ferramentas incentivam os visitantes a explorar seu conteúdo As páginas que convidam à interação tendem a manter a atenção por mais tempo.
O que você vai precisar
- WordPress instalado em seu site
- Complementos Mestres para Elementor instalado e ativado A versão gratuita cobre o Elemento Tooltip; a Extensão Tooltip precisa Master Addons Pro.
- Construtor de páginas Elementor (gratuito ou Pro)
Master Addons é um plugin WordPress com mais de 80 widgets e extensões para Elementor, incluindo ambos os recursos de dica de ferramenta abordados aqui.
Tooltip Element vs. Tooltip Extension: qual você deve usar?
Eles resolvem problemas diferentes Escolher o certo economiza tempo.
| Característica | Elemento Tooltip | Extensão ToolTIP |
|---|---|---|
| O que é | Um widget Elementor independente | Uma extensão que funciona em qualquer widget |
| Trabalha em | Texto, imagens e ícones (dentro do widget de dica de ferramenta) | Qualquer recipiente, seção ou elemento Elementor |
| Melhor para | Criando blocos de conteúdo de dicas de ferramentas dedicados | Adicionando dicas de ferramentas aos elementos de página existentes |
| Como acessar | Arraste e solte do painel de widgets Elementor | Habilitar a partir da guia Avançado de qualquer widget |
| Tipos de conteúdo | Dica de ferramenta de texto, dica de ferramenta de imagem, dica de ferramenta de ícone | Dica de ferramenta baseada em texto em qualquer elemento |
| Caso de uso | Você deseja construir uma seção projetada especificamente em torno de dicas de ferramentas | Você deseja adicionar uma dica de ferramenta rápida a um botão, título, imagem ou qualquer widget já em sua página |
A versão curta:
- Precisa adicionar uma dica de ferramenta a um cabeçalho, botão ou qualquer widget já em sua página? use o Extensão ToolTIP.
- Precisa de um bloco de conteúdo dedicado onde os usuários pairam sobre texto, imagens ou ícones específicos para ver o conteúdo da dica de ferramenta? Use o Elemento Tooltip.
Você pode usar ambos na mesma página Eles não entram em conflito um com o outro.
Método 1: como adicionar dica de ferramenta no Elementor usando o Elemento da Dica de Ferramenta
O Elemento Tooltip é um widget independente. Você o arrasta para sua página e os usuários passam o mouse sobre texto, imagem ou ícone para revelar uma mensagem de dica de ferramenta.
Use isso quando quiser criar dicas de ferramentas de imagem, dicas de ferramentas de texto ou dicas de ferramentas de ícones como uma seção dedicada de sua página.
Passo 1: abra sua página no Elementor
A partir do seu painel do WordPress, navegue até a página que deseja editar e clique Editar com o Elementor.
Passo 2: procure o widget Tooltip
No painel de widgets Elementor do lado esquerdo, digite “Tooltip” na barra de pesquisa. O Dica de ferramenta MA widget aparece sob a seção Complementos mestres Arraste-o para sua página onde você deseja que a dica de ferramenta apareça.
Passo 3: escolha o seu tipo de conteúdo
Clique no widget para abrir suas configurações. Sob o Conteúdo guia, o Tipo de conteúdo opção dá-lhe três escolhas:
- Texto. Os visitantes passam o mouse sobre o seu texto para ver a mensagem da dica de ferramenta.
- Imagem. Os visitantes pairam sobre uma imagem para ver a dica de ferramenta.
- Ícone. Os visitantes pairam sobre um ícone para revelar informações adicionais.
Escolha o tipo de conteúdo que se adapta ao seu caso de uso.
Passo 4: configure o conteúdo da dica de ferramenta
Depois de escolher o seu tipo de conteúdo, configure ambas as partes:
O conteúdo do gatilho (o que os visitantes veem na página):
- Para Texto: digite a palavra ou frase que os visitantes passarão o mouse
- Para Imagem: carregue uma imagem da sua Biblioteca de Mídia WordPress
- Para ícone: escolha um ícone na biblioteca de ícones
O conteúdo da dica de ferramenta (o que aparece no hover):
- Ir para o Configurações da dica de ferramenta seção
- Insira o texto da dica de ferramenta no editor integrado
- Você pode formatar o texto com negrito, itálico, links e muito mais
Passo 5: configurar a direção e velocidade da dica de ferramenta
Nas Configurações da Dica de Ferramenta, defina como a dica de ferramenta aparece:
- Direção Tooltip. Escolha onde a dica aparece em relação ao gatilho: superior, inferior, esquerdo ou direito.
- Velocidade Tooltip. Defina a velocidade de animação em milissegundos Valores mais baixos fazem com que pareça mais rápido.
Dica: Mantenha a velocidade da dica de ferramenta entre 300-500 ms. Muito rápido parece abrupto, muito lento parece indiferente.
Passo 6: estilize sua dica de ferramenta
Mudar para o Estilo guia para personalizar a aparência do seu widget de dica de ferramenta Elementor:
- Conteúdo Largura máxima. Controla a largura que a caixa de dicas de ferramentas pode obter.
- Cor Fundo. Defina o fundo da dica de ferramenta.
- Texto Cor. Altere a cor da fonte da dica de ferramenta.
- Tipografia. Ajuste a família, tamanho, peso e espaçamento das fontes.
- Caixa Sombra. Adicione profundidade com um efeito de sombra.
- Fronteira. Adicione bordas e defina o raio da borda para cantos arredondados.
- Acolchoamento. Controle o espaço entre as bordas do texto e da dica de ferramenta.
Você pode definir estilos diferentes para o normal e pairar estados para adicionar feedback visual.
Abaixo dos estilos gerais, o Estilos de dicas de ferramentas seção dá-lhe o controle sobre a bolha em si Definir a largura da ponta de ferramenta em pixels, escolher cores de fundo e texto, ajustar a tipografia, configurar preenchimento em todos os quatro lados, escolher um tipo de borda, definir raio de borda para cantos arredondados, controlar a distância entre o gatilho e a bolha, alinhar o texto dentro da ponta de ferramenta, e adicionar uma sombra de caixa para profundidade.
Para um passo a passo completo de cada configuração, verifique o Documentação do elemento Tooltip ou assista ao vídeo tutorial.
Método 2: como adicionar dica de ferramenta a qualquer widget Elementor usando a extensão Tooltip
O Extensão ToolTIP funciona de forma diferente do elemento Em vez de ser um widget independente, ele adiciona um Dica de ferramenta seção para a guia Avançado de cada elemento Elementor Selecione qualquer widget, contêiner, coluna ou seção que já exista em sua página, inverta o interruptor, digite seu texto e os visitantes verão uma pequena bolha quando passarem o mouse sobre esse elemento Cada elemento carrega sua própria dica de ferramenta, para que três cartas seguidas possam se explicar cada uma com um texto diferente.
A extensão se divide em duas sub-guias: Configurações para comportamento (texto, posicionamento, animação, gatilho, tempo) e Estilo para looks (cores, largura, preenchimento, tipografia).
Passo 1: habilite a extensão Tooltip
Do seu painel WordPress, vá para Adições Mestres e abra o Extensões guia. Dicas de ferramentas ficam no Widgets Dinâmicos grupo. Clique em sua alternância para que fique roxo e depois bata Salvar alterações no topo e aguarde o verde “Configurações salvou com sucesso o aviso de”.
Passo 2: abra sua página no Elementor
Navegue até a página que deseja editar e clique Editar com o Elementor.
Passo 3: selecione qualquer elemento
Clique em qualquer elemento existente onde você deseja adicionar uma dica de ferramenta Isso funciona com títulos, botões, imagens, ícones, tabelas de preços, contêineres, colunas, seções e qualquer elemento de widget Elementor ou Master Addons A seção de dica de ferramenta aparece na guia Avançado de cada elemento.
Passo 4: vá para a guia Avançado e habilite a dica de ferramenta
Com o seu elemento selecionado, clique no Avançado guia no painel de configurações. Role para baixo até encontrar o Dica de ferramenta seção com o emblema MA roxo Expanda-o e vire o Dica de ferramenta mude para Sim. A sub-guia Configurações abre primeiro.
Passo 5: configure as configurações da dica de ferramenta
A sub-guia Configurações dá-lhe controlo sobre como a dica de ferramenta se comporta:
- Conteúdo: o texto da dica de ferramenta. Digite-o ou puxe-o de uma tag dinâmica Se o seu site tiver o Elementor AI ligado, o link Escrever com IA do próprio Elementor também aparece aqui.
- Colocação: qual lado do elemento a bolha prefere: superior (o padrão), inferior, esquerdo ou direito.
- Siga Cursor: faz com que a dica de ferramenta rastreie o mouse em vez de ficar parada Útil para mapas, gráficos e diagramas onde cada área sob o cursor precisa de seu próprio rótulo.
- Animação: como a bolha entra Sete escolhas: Nenhuma, Desaparecer, Shift-Away, Shift-Toward, Escala, Perspectiva e Efeito de Preenchimento.
- Acionador: o que abre a dica de ferramenta. Passe o mouse por padrão ou clique para obter dicas persistentes que aceitam a tela sensível ao toque.
- Duração e atraso: a velocidade de animação em milissegundos e quanto tempo a bolha permanece antes de fechar.
- Deslocamento X e Y: afaste a bolha de seu ponto padrão por um número específico de pixels.
- Tipo de seta e seta: adicione o pequeno ponteiro conectando bolha ao elemento, com opções de estilo nítidas ou redondas.
Passo 6: estilize a dica de ferramenta
Mudar para o Estilo sub-guia para fazer a bolha corresponder ao seu design em vez de parecer um padrão do navegador.
- Largura máxima: limita a largura da bolha em que o texto fica tão longo, envolve em vez de se esticar pela tela.
- Texto, Fundo e Cor da Seta: controle de cor total, incluindo o ponteiro.
- Preenchimento, tipo de borda e raio de borda: a forma da bolha.
- Alinhamento de texto, sombra de caixa e tipografia: termine o look com sua própria fonte e profundidade.
Passo 7: verifique o resultado
Salvar e visualizar a página Passe o mouse sobre o elemento e a dica de ferramenta se desvanece com o texto que você escreveu, usando a animação, as cores e a largura que você definiu Mova o cursor para longe e ele fecha após o atraso Repita para os outros elementos da página.
Para obter detalhes completos da configuração, consulte o Documentação da extensão da dica de ferramenta ou assista ao vídeo tutorial.
Casos de uso práticos para cada método
Quando usar o Elemento da Dica de Ferramenta
O Elemento de Dica de Ferramenta é um bloco de conteúdo dedicado Use-o quando as dicas de ferramentas forem o ponto principal da seção:
- Páginas de vitrine de recursos. Exiba recursos do produto como ícones ou imagens com descrições de dicas de ferramentas.
- Seções glossário. Crie um glossário em linha onde os leitores pairam sobre os termos para ver as definições.
- Itens de portfólio. Adicione dicas de ferramentas de imagem às miniaturas do portfólio mostrando detalhes do projeto.
- Páginas equipe. Coloque ícones ou fotos com detalhes da dica de ferramenta sobre as funções da equipe.
- Conteúdo educativo. Deixe os alunos passarem o mouse sobre palavras-chave para ver explicações sem sair da página.
Quando usar a extensão Tooltip
A Extensão Tooltip adiciona contexto aos elementos que já existem na sua página:
- Cartões recurso. Uma frase de detalhe extra sem alongar o cartão.
- Tabelas de preços. Explique o que o “priority support” realmente cobre, exatamente onde as pessoas se perguntam Veja nosso Widget de tabela de preços para mais.
- Botões e ícones. Controles somente de ícones de rótulos para que ninguém adivinhe.
- Membros equipe. Um fato divertido ou nota de função pairando sobre cada foto.
- Termos técnicos. Definições curtas sobre jargão, mais baratas que uma página de glossário.
Combinando ambos os métodos
Você pode usar ambos na mesma página Por exemplo, use o Elemento Tooltip para construir uma seção de comparação de recursos onde os visitantes passam o mouse sobre os ícones para aprender sobre cada recurso e, em seguida, use a Extensão Tooltip no botão CTA na parte inferior para adicionar um teste “Free de 14 dias, sem necessidade de cartão de crédito, dica de ferramenta”.
Não há conflito entre os dois Eles servem a propósitos diferentes e podem coexistir em qualquer página.
Melhores práticas de dicas de ferramentas para WordPress
- Mantenha o texto da dica de ferramenta curto. Aponte para 1-2 frases Se você precisar de mais do que isso, a informação provavelmente pertence à própria página, não escondida em uma dica de ferramenta.
- Use posicionamento consistente. Escolha uma direção (a parte superior ou inferior funciona melhor para a maioria dos casos) e mantenha-a em todo o site As posições de mistura parecem aleatórias.
- Não use demais as dicas de ferramentas. Se cada elemento da sua página tiver uma dica de ferramenta, os visitantes não se darão ao trabalho de passar por cima de nenhum deles Use-os onde eles realmente agreguem valor.
- Certifique-se de que as dicas de ferramentas funcionem no celular. O Hover não existe em telas sensíveis ao toque O elemento Tooltip e a extensão Tooltip suportam um gatilho de clique, que funciona melhor para usuários móveis. Teste suas dicas de ferramentas em um telefone antes de publicar.
- Combine o design do seu site. Personalize cores, fontes e bordas da dica de ferramenta para combinar com o tema existente O estilo padrão da dica de ferramenta pode parecer deslocado em um site polido.
Tooltip Element vs. Tooltip Extension: comparação rápida
| Característica | Elemento Tooltip | Extensão ToolTIP |
|---|---|---|
| Configuração | Arraste e solte um novo widget | Habilite na guia Avançado de qualquer widget existente |
| Disparar conteúdo | Texto, imagens, ícones (incorporados no widget) | Qualquer elemento Elementor: títulos, botões, imagens, seções, contêineres |
| Melhor para | Blocos de conteúdo de dicas de ferramentas dedicados | Adicionando dicas de ferramentas aos projetos existentes |
| Plano | Grátis | Pro |
| Animações | 7 opções: Nenhuma, Desvanecer, Shift-Away, Shift-Toward, Escala, Perspectiva, Efeito de Preenchimento | Mesmas 7 opções |
| Seguir Cursor | Sim | Sim |
| Personalização | Controle completo de estilo | Controle de estilo completo (sub-guia Estilo) |
| Várias dicas de ferramentas por página | Sim | Sim (cada elemento carrega o seu próprio) |
| Curva aprendizagem | Mínimo | Mínimo |
O elemento Tooltip vem gratuitamente Complementos Mestres para Elementor plugin. A extensão Tooltip faz parte Master Addons Pro.
Perguntas frequentes
Como adiciono uma dica de ferramenta no WordPress sem um plugin?
Você pode adicionar dicas de ferramentas básicas usando HTML adicionando a title atribua a qualquer elemento (por exemplo, <span title="Your tooltip text">Hover here</span>).mas este método oferece controle de estilo zero e parece diferente entre os navegadores Para dicas de ferramentas personalizadas e estilizadas no WordPress, um plugin como Master Addons oferece controle total sobre design, animação e posicionamento.
Posso adicionar uma dica de ferramenta a uma imagem no Elementor?
Sim. Master Addons oferece duas maneiras Use o Elemento Tooltip e selecione “Image” como o tipo de conteúdo para criar uma dica de ferramenta de imagem dedicada Ou use a Extensão Tooltip em qualquer widget Elementor Image para adicionar uma dica de ferramenta a uma imagem existente em sua página.
As dicas de ferramentas funcionam em dispositivos móveis?
As dicas de ferramentas baseadas em hover padrão não funcionam em telas sensíveis ao toque, pois não há cursor para pairar Tanto o Elemento da Dica de Ferramenta dos Complementos Mestres quanto a Extensão da Dica de Ferramenta têm um gatilho de clique, portanto, a dica de ferramenta abre quando alguém toca no elemento em um telefone.
Qual é a diferença entre uma dica de ferramenta e um popover?
Uma dica de ferramenta é uma pequena dica baseada em texto que aparece no hover e desaparece quando você afasta o cursor Um popover geralmente é maior, pode conter conteúdo rico como imagens, botões ou formulários e geralmente requer um clique para abrir e fechar O Elemento de Dica de Ferramenta Master Addons pode incluir texto formatado, tornando-o flexível tanto para dicas de ferramentas simples quanto para conteúdo hover mais rico.
As dicas de ferramentas são boas para SEO?
O conteúdo da dica de ferramenta é renderizado no HTML, para que os mecanismos de pesquisa possam rastrear o texto dentro deles No entanto, como o conteúdo da dica de ferramenta está oculto por padrão e visível apenas no hover, os mecanismos de pesquisa podem dar menos peso Não ocultar conteúdo importante nas dicas de uso para informações suplementares que agreguem valor à experiência do usuário.
Posso usar o elemento Tooltip e a extensão Tooltip na mesma página?
Sim. eles funcionam de forma independente e não entram em conflito entre si Use o elemento Tooltip para blocos de conteúdo de dicas de ferramentas dedicados e a extensão Tooltip para adicionar dicas de ferramentas rápidas a qualquer widget Elementor existente na mesma página.
Comece a adicionar dicas de ferramentas ao seu site WordPress
Com Master Addons, você obtém duas opções: o Elemento Tooltip para criar conteúdo de dica de ferramenta dedicado com gatilhos de texto, imagem e ícone, e o Extensão ToolTIP para adicionar dicas de ferramentas a qualquer elemento Elementor existente em sua página.
O elemento Tooltip funciona com o plugin gratuito e a extensão Tooltip precisa do Pro. Se você quiser dicas de ferramentas fixadas em pontos específicos de uma imagem, observe o Widget de ponto de acesso de imagem (Pro).
Baixe complementos mestres para elementor para começar.
