Às vezes, um design precisa de uma explicação curta sem dar uma linha completa na página Esse é o trabalho de uma dica de ferramenta: uma pequena bolha que aparece no hover, diz sua peça e sai do caminho Widget de dica de ferramenta em Complementos Mestres para Elementor anexa essa bolha a um ícone, um pedaço de texto ou uma imagem, com controle sobre posicionamento, animação, gatilho e estilo.
Este guia percorre o widget desde o primeiro arrasto até uma dica de ferramenta estilizada na página ao vivo.
O que o widget Tooltip faz #
O widget coloca um pequeno elemento de destino em sua página, um ícone, texto ou imagem, e vincula uma bolha de dica de ferramenta a ele Quando os visitantes pairam ou clicam no destino, a bolha aparece com sua mensagem A colocação, animação, tempo e deslocamentos são todos configuráveis, e a guia Estilo cobre tanto o destino quanto a bolha.
Este é um widget independente: o destino e sua dica de ferramenta são o ponto inteiro Se você quiser adicionar dicas de ferramentas aos widgets que já possui na página, o Master Addons também envia uma extensão Tooltip que é anexada a qualquer elemento Elementor O widget é a escolha certa quando o alvo da dica de ferramenta é seu próprio pequeno elemento de design, como um ícone de informações ao lado de um preço ou um avatar de equipe com uma bolha de nomes.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- O widget Tooltip habilitado no painel de opções Master Addons, em Basic Widgets.
Como adicionar o widget Tooltip #
No editor Elementor, pesquise no Elementos painel para Dica de ferramenta e arraste o widget para sua página Ele carrega com um ícone de informações como destino padrão e uma dica de ferramenta de espaço reservado já conectada, então passar o ícone na tela mostra o balão imediatamente.
Escolha o tipo de conteúdo: ícone, texto ou imagem #
Aberto Configurações Conteúdo na guia Conteúdo. O Tipo de conteúdo switcher no topo oferece três alvos:
- Ícone: escolha qualquer ícone da biblioteca Elementor. O círculo de informações clássico é o padrão.
- Texto: digite uma palavra ou frase, como “Hover Me!”, e a dica de ferramenta é anexada a ela.
- Imagem: escolha uma imagem da biblioteca de mídia, útil para avatares e miniaturas de produtos.
Dois controles se aplicam a cada tipo. Alinhamento coloca o alvo à esquerda, centro ou direita. Tag HTML envolve o alvo na marcação que você escolher: H1 a H6, div, span, p, botão ou a. Fique com p ou span para dicas de ferramentas simples; use o botão quando o alvo deve agir como um controle de acessibilidade.
Com Texto selecionado, um campo Conteúdo substitui o selecionador de ícones:
Com Imagem seleccionada, a mediateca abre-se e a imagem escolhida torna-se o alvo do hover:
Escreva a dica de ferramenta e defina seu comportamento #
O Opções Tooltip seção controla a própria bolha.
- Texto da dica de ferramenta: a mensagem dentro da bolha Mantenha-a em uma ou duas linhas; as dicas de ferramentas são para dicas, não para parágrafos.
- Siga Cursor: deixe a bolha rastrear o mouse em vez de permanecer presa ao alvo.
- Colocação: onde a bolha fica em relação ao alvo A parte superior é o padrão, com Top Start, Bottom e as outras bordas disponíveis.
- Animação: como a bolha entra, Shift-Away por padrão.
- Acionador ligado: Hover mostra a bolha no mouseover; Clique espera por um toque, que também funciona melhor em telas sensíveis ao toque.
- Duração e atraso: velocidade de animação e quanto tempo a bolha permanece após a saída do cursor, ambos 300 milissegundos por padrão Os padrões parecem certos para a maioria das páginas; apenas diminua a velocidade se a dica transportar algo que os visitantes precisam de uma batida mais longa para ler.
O Deslocamento X e Compensação Y os controles deslizantes afastam a bolha de seu ponto padrão. Útil quando a dica precisa limpar uma borda ou sentar-se ao lado de um alvo de formato estranho.
Estilize o alvo #
No Estilo guia, Estilos Gerais cobre o elemento de destino na página.
- Largura e preenchimento do conteúdo: o tamanho do bloco alvo A demonstração amplia de 150 para 215 pixels para dar a sala de avatar.
- Estados normais e Hover: Cor de fundo, cor do texto, sombra da caixa e tipografia para cada estado.
- Tipo de fronteira e raio de fronteira: enquadre o alvo; um raio de 4 pixels mantém os cantos suaves.
Estilo a bolha da dica de ferramenta #
O Estilos de dicas de ferramentas a seção estiliza o balão e o canvas o visualiza ao vivo enquanto você trabalha.
- Largura da dica de ferramenta: a largura máxima da bolha, 200 pixels por padrão O texto envolve dentro dela.
- Cor de fundo e cor do texto: a demonstração fica escura com texto branco, o clássico visual de dicas de ferramentas de alto contraste.
- Tipografia, Preenchimento, Fronteira: o texto e o quadro da bolha.
- Distância: a lacuna entre a bolha e o alvo, 10 pixels por padrão.
- Alinhamento de texto e sombra de caixa: os últimos toques Uma sombra suave ajuda a bolha a ler como flutuando acima da página.
O resultado na página #
Na página ao vivo, o alvo fica quieto até que um visitante o paire. Em seguida, a bolha se anima no local escolhido, mantém-se enquanto o cursor permanece e desaparece após o atraso definido.
Casos de uso comum #
- Ícones de informações ao lado de linhas de preços, rótulos de formulários e listas de recursos.
- Avatares equipe que revelam um nome e um papel no hover.
- Termos do glossário em texto, com uma breve definição na bolha.
- Miniaturas do produto com uma especificação ou nota que não merece espaço na página.
- Botões somente de ícone onde a dica nomeia a ação.
Dicas para melhores dicas de ferramentas #
- Mantenha o texto curto. Uma ou duas linhas Se a mensagem precisar de mais, ela pertence ao layout, não a uma dica de ferramenta.
- Use o gatilho Click para visitantes sensíveis ao toque. O Hover não existe em telefones; uma dica de ferramenta acionada por clique funciona em todos os lugares.
- Cuidado com o contraste. Bolha escura, texto leve ou o inverso A largura padrão de 200 pixels com 10 preenchimento lê bem em tamanhos de fonte típicos.
- Verifique a colocação perto das bordas da tela. Uma dica de ferramenta superior no primeiro elemento de uma página pode ser cortada; mude para Inferior ou use os deslocamentos.
- Não esconda informações críticas nas dicas de ferramentas. Qualquer coisa que os visitantes devam ler pertence à página; a bolha é para extras.
Vídeo Tutorial #
Se preferir assistir a dica de ferramenta em ação, este pequeno vídeo cobre toda a configuração, desde arrastar o widget até a bolha estilizada na página ao vivo.
Perguntas frequentes #
O que é o widget Tooltip em Master Addons?
É um widget Elementor que coloca um ícone, texto ou imagem na página e anexa uma bolha de dica de ferramenta a ele A bolha aparece no hover ou clique, e você controla sua colocação, animação, tempo, deslocamentos e estilo completo do painel Elementor.
O alvo da dica de ferramenta pode ser uma imagem?
Sim. Defina o tipo de conteúdo como imagem nas configurações de conteúdo e escolha qualquer imagem da biblioteca de mídia. A dica de ferramenta aparece quando os visitantes pairam ou clicam na imagem, o que se adapta aos avatares da equipe e às miniaturas dos produtos.
Posso mostrar a dica de ferramenta clicando em vez de passar o mouse?
Sim. nas Opções de Dica de Ferramenta, altere o Trigger on de Hover para Click O acionamento de cliques também se comporta melhor em telefones e tablets, onde o hover não existe.
Como altero onde a dica de ferramenta aparece?
Use o dropdown de Colocação nas Opções de Dica de Ferramenta para escolher a Parte Superior, Inferior ou uma variante inicial ou final de cada aresta Os controles deslizantes X Offset e Y Offset ajustam a posição exata e a Distância define a lacuna em relação ao alvo.
Posso estilizar a bolha da dica de ferramenta?
Sim. A seção Estilos de dicas de ferramentas na guia Estilo controla a largura da bolha, a cor de fundo, a cor do texto, a tipografia, o preenchimento, a borda, a distância do alvo, o alinhamento do texto e a sombra da caixa O editor visualiza as alterações ao vivo.
Embrulhando #
O widget Tooltip lida com todo o padrão de bolha de dicas em um só lugar: escolha um ícone, texto ou alvo de imagem, escreva a mensagem, defina o gatilho e o posicionamento e estilize ambas as metades do painel Elementor. Navegue pelo conjunto completo de Widgets e extensões Master Addons para a extensão Tooltip e tudo mais na caixa, e veja o página preços pelo que o Pro acrescenta.
