Alguns detalhes não merecem um parágrafo inteiro na página Uma nota curta que aparece no hover faz o trabalho, como contexto extra em um cartão de recurso ou um rótulo em um botão somente de ícone Elementor não tem nenhuma maneira embutida de fazer isso, então o Dica de ferramenta extensão em Complementos Mestres para Elementor adiciona um à guia Avançado de cada elemento.
Você escreve o texto da dica de ferramenta, escolhe onde ele aparece e como ele anima e, em seguida, estiliza-o como qualquer outra parte do seu design. Sem shortcode e sem CSS.
O que a extensão Tooltip faz #
Uma vez habilitado, cada elemento Elementor recebe um Dica de ferramenta seção sob o Avançado guia. Ligue-o para um elemento, digite o texto e os visitantes verão uma pequena bolha quando passarem o mouse sobre esse elemento na página ao vivo Cada elemento carrega sua própria dica de ferramenta, para que três cartões seguidos possam se explicar cada um com 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).
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? siga o guia instalação primeiro.
- Tooltips é uma extensão gratuita, portanto, nenhuma licença Pro é necessária.
Como ativar 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 com um distintivo Popular, ao lado de Tags Dinâmicas e Wrapper Link. 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”.
Adicionar uma dica de ferramenta a um elemento #
Abra sua página com o Elementor e selecione o elemento No exemplo de vídeo é uma placa Info Box em uma linha de recursos de três colunas Vá para o Avançado aba, abra o Dica de ferramenta seção com o emblema MA roxo e vire o Dica de ferramenta mude para Sim. A sub-guia Configurações abre primeiro.
Configurações explicadas #
- Conteúdo: o texto da dica de ferramenta. Digite-o ou use o link Escrever com IA se desejar um ponto de partida.
- 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 parado.
- 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.
- 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 do ponto padrão.
- Tipo de seta e seta: adicione o pequeno ponteiro conectando bolha ao elemento, afiado ou redondo.
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, 200 px na demonstração, então um texto longo envolve em vez de se estender 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.
O resultado na página #
Salvar e visualizar a página Passe o mouse sobre o cartão e a dica de ferramenta desaparece com o texto que você escreveu, usando a animação, cores e largura que você definiu Mova o cursor para longe e ele fecha após o atraso.
Repita para os outros elementos na página Na demonstração cada um dos três cartões de recurso recebe seu próprio texto de dica de ferramenta, escrito uma vez no painel e servido em cada hover.
Onde as dicas de ferramentas ganham seu sustento #
- 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.
- 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.
Vídeo Tutorial #
Prefere vê-lo ao vivo? este vídeo passa por habilitar a extensão, escrever a dica de ferramenta e estilizar a bolha.
Perguntas frequentes #
Como adiciono uma dica de ferramenta no Elementor?
Habilite a extensão Tooltips na guia Master Addons Extensions e, em seguida, selecione qualquer elemento no editor Elementor, abra a guia Avançado e ligue o interruptor Tooltip. Digite seu texto na caixa Conteúdo, escolha um posicionamento e animação e a dica de ferramenta será exibida ao passar o mouse.
Posso adicionar uma dica de ferramenta a qualquer widget Elementor?
Sim. A seção Dica de ferramenta aparece na guia Avançado de cada elemento: widgets, colunas, contêineres e seções Cada elemento mantém seu próprio texto e configurações da dica de ferramenta, para que cartões diferentes na mesma página possam dizer coisas diferentes.
Posso estilizar a dica de ferramenta para combinar com meu site?
Sim. A sub-guia Estilo controla a largura máxima, cor do texto, cor de fundo, cor da seta, preenchimento, borda, raio da borda, alinhamento de texto, sombra de caixa e tipografia A bolha pode combinar com sua marca em vez de parecer um padrão do navegador.
Quais animações a dica de ferramenta suporta?
Sete opções: Nenhuma, Desvanecer, Shift-Away, Shift-Toward, Escala, Perspectiva e Efeito de Preenchimento Você também controla a duração da animação em milissegundos e o atraso antes que a dica de ferramenta feche após a saída do cursor.
A extensão Tooltip é gratuita?
Sim. Tooltips vem com a versão gratuita de Master Addons for Elementor, no grupo Dynamic Widgets da guia Extensões. O página preços mostra o que os planos Pro adicionam além das extensões gratuitas.
Embrulhando #
A extensão Tooltip para Elementor coloca uma pequena nota de hover estilável em qualquer coisa que você construir: inverta o interruptor na guia Avançado, escreva o texto, escolha o posicionamento e a animação e estilize a bolha uma vez. Parece parte do seu design, não sobra um navegador. Para atualizações mais avançadas, navegue pelo Widgets e extensões Master Addons, ou veja o Extensão Glassmorphism para outro efeito de alternância.
