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 isso?
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 ou clique para notas persistentes, o que funciona melhor em telas sensíveis ao toque Adicione animação de entrada, controle a duração e oculte-atraso para que as dicas de ferramentas pareçam suaves em vez de chocar.
- 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 da ferramenta): você precisa de uma nova dica lançada na página Ele traz seu próprio texto ou ícone de gatilho.
Extensão das dicas de ferramentas: você já tem um botão, imagem ou título e deseja que uma dica de ferramenta seja anexada a ele, incluindo o modo Seguir Cursor.
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 adicioná-lo?
- 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.
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 com seu próprio gatilho O extensão anexa uma dica de ferramenta a qualquer widget, seção ou contêiner existente e adiciona o modo Seguir Cursor 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
