Elementor Tooltip Widget - Adicionar dicas de Hover em qualquer lugar
O elemento Tooltip é um widget Elementor independente Arraste-o ao lado de um campo de formulário, dentro de uma tabela de preços ou ao lado de um termo confuso, e ele renderiza seu próprio gatilho mais bolha de dica de ferramenta Se você quiser anexar uma dica de ferramenta a um botão, ícone ou seção que já existe na página, use o Dicas de ferramentas extensão em vez disso.
O que você pode fazer com o widget Tooltip
Controle de colocação
Escreva o texto da dica de ferramenta e, em seguida, escolha onde a bolha aparece: variantes superior, inferior, esquerda, direita, além de início e fim. Ajuste com deslocamentos de pixels X e Y para que a bolha nunca cubra a coisa que explica.
- Explique os campos de formulário, preços ou jargão exatamente onde a pergunta surge.
- Fixe o balão com compensações para limpar menus, cabeçalhos adesivos e botões próximos.
- Orientar os usuários através de formulários de várias etapas com dicas contextuais curtas.
Estilo: estados normais e de hover
Projete o gatilho e a bolha separadamente Defina o fundo, a cor do texto, a tipografia, o preenchimento, o raio da borda, as bordas e a sombra da caixa Cada propriedade possui controles independentes para os estados normal e de pairar.
- Combine exatamente as cores da marca em vez de viver com padrões de navegador cinza.
- Faça dicas sutis (contorno fantasma) ou altas (pílula sólida com sombra) dependendo do contexto.
- Estilo pairar feedback para que os usuários saibam que o elemento é interativo.
Gatilho e animação
Acione no hover para dicas rápidas, clique para obter notas que devem permanecer abertas (isso funciona melhor em telas sensíveis ao toque) ou com um gatilho personalizado Escolha uma animação de entrada e defina a duração e oculte o atraso. Ligue o Cursor Seguir se quiser que a bolha siga o mouse, o que combina com mapas e diagramas.
- Passe o mouse para microcópia de desktop; clique para obter dicas persistentes compatíveis com dispositivos móveis.
- Um desbotamento sutil ou entrada em escala chama a atenção sem incomodar o usuário.
- O atraso de ocultação evita que a dica da ferramenta pisque quando o cursor passa.
Elemento ou Extensão: qual você precisa?
Esta página (Elemento da ponta de ferramenta, grátis): você precisa de uma nova dica na página O widget traz seu próprio gatilho, que pode ser texto, um ícone ou uma imagem.
Extensão das dicas de ferramentas (Pro): você já tem um botão, imagem ou título na página e deseja que uma dica de ferramenta seja anexada a ela.
Casos de uso comum
- Formulários: “Password precisa de 12+ caracteres” ao lado da entrada, sem alongar a forma.
- Tabelas de preços: defina “per seat” vs “per workspace” inline.
- Botões: esclarecer o que acontece após o clique (“Não é necessário cartão”).
- Equipe/listagens: função, trecho de biografia ou atalho de contato no hover.
- Integração: instruções curtas além de novos recursos ou widgets do painel.
Como adicionar uma dica de ferramenta no Elementor
- Largue o widget Em Elementor, procure “Tooltip” em Master Addons e arraste-o para onde a dica pertence.
- Escrever e colocar. Insira o texto da dica de ferramenta, defina o gatilho (hover ou clique), escolha o posicionamento e os deslocamentos.
- Estilo-lo Na guia Estilo, design Normal e Hover afirma: cores, tipografia, raio, sombra Publicar.
- Quer capturas de tela de cada configuração? Leia nosso guia como adicionar uma dica de ferramenta no Elementor.
Perguntas frequentes para a dica de ferramenta
Para que serve o elemento Tooltip?
Adicionando contexto curto e útil sem sobrecarregar o layout: explicações de campo, definições de termos, esclarecimentos de botões, instruções inline Qualquer coisa não essencial que ajude quando solicitada.
Como isso é diferente da extensão Tooltips?
O elemento é um widget independente e gratuito com seu próprio gatilho. O Dicas de ferramentas extensão faz parte do Pro e anexa uma dica de ferramenta a um widget, seção ou contêiner que já está na página Ambos têm Seguir Cursor, predefinições de posicionamento e acionadores de hover ou clique Precisa de um novo ponto de dica? use o elemento Precisa de dicas de ferramentas sobre coisas que já estão na página? use a extensão.
Posso estilizar estados normais e hover separadamente?
Sim. A guia Estilo possui controles normais e de pairar independentes para plano de fundo, texto, bordas, raio e sombra.
Como faço para controlar onde a bolha aparece?
Use predefinições de colocação (variantes superior, inferior, esquerda, direita, mais inicial e final) e, em seguida, empurre com deslocamentos X e Y em pixels.
Passe o mouse ou clique: qual gatilho devo usar?
Passe o mouse para dicas rápidas de desktop; clique para qualquer coisa que deva funcionar em telas sensíveis ao toque, já que o hover não existe no celular.
Isso desacelerará meu site?
Não. Ele carrega apenas seu próprio pequeno CSS e JS quando presente na página. Um punhado de dicas de ferramentas por página não tem impacto perceptível.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
