Plain JavaScript Tooltip

Uma dica de ferramenta é um pop -up pequeno e informativo que exibe quando um usuário paira sobre um elemento, como um botão ou texto. Mais especificamente, o objetivo de uma dica de ferramenta é fornecer informações ou esclarecimentos adicionais sobre o elemento em questão.

Este artigo demonstrará a dica de ferramenta usando JavaScript simples.

Como criar uma dica de ferramenta JavaScript simples?

Para criar uma dica de ferramenta usando JavaScript, use o “passe o rato por cima" e "MouseOut”Eventos. Siga os exemplos abaixo do dado para uma melhor compreensão.

Exemplo 1: dica de ferramenta usando javascript

No exemplo dado, criaremos uma dica de ferramenta em JavaScript puro e também estilizaremos a dica de ferramenta usando o “estilo”Atributo.

Primeiro, crie um texto em que queremos mostrar uma dica de ferramenta no evento MouseOver:

Linuxhint

Obtenha o texto em que a dica de ferramenta aparecerá usando o “getElementById ()”Método:

var lh = documento.getElementById ("texto");

Agora, ligue para o “addEventListener ()”Método, passando o“passe o rato por cima”Evento e uma função () como um parâmetro. Na função definida, primeiro, criaremos uma dica de ferramenta criando um “div”Elemento, defina o texto que será mostrado no mouse e definindo algum estilo da dica de ferramenta usando o“estilo”Atributo. Por fim, adicione a dica de ferramenta usando o “ApndendChild ()”Método:

LH.addEventListener ("mouseOver", function ()
var tooltip = documento.createElement ("div");
dip de ferramenta.INNERHTML = "Um melhor site para aprender habilidades";
dip de ferramenta.estilo.visibilidade = "visível";
dip de ferramenta.estilo.posicionamento = "absoluto";
dip de ferramenta.estilo.AntecedentesColor = "RGB (107, 101, 101)";
dip de ferramenta.estilo.preenchimento = "5px";
dip de ferramenta.estilo.borderRadius = "3px";
dip de ferramenta.estilo.color = "branco";
dip de ferramenta.estilo.esquerda = "50%";
dip de ferramenta.estilo.width = "200px";
documento.corpo.ApndendChild (ToolTip);
);

Aqui, utilize o “MouseOut”Evento que removerá a dica de ferramenta enquanto o cursor afastará o texto:

LH.addEventListener ("mouseout", function ()
documento.corpo.RemoveChild (ToolTip);
);

Saída

Exemplo 2: Tooltip usando JavaScript com CSS

Você também pode criar uma dica de ferramenta no JavaScript com CSS.

Para fazer isso, crie uma área para mostrar o texto da dica de ferramenta usando a tag e atribuir um ID "#MyToolTip”:

= "MyTooltip">

Obtenha as referências do texto e a dica de ferramenta usando o “getElementById ()”Método:

var lh = documento.getElementById ("texto");
var tooltip = documento.getElementById ("myTooltip");

Ligue para a dica de ferramenta no “passe o rato por cima”Evento ao definir o texto na função usando o“Innerhtml" propriedade:

LH.addEventListener ("mouseOver", function ()
dip de ferramenta.estilo.visibilidade = "visível";
dip de ferramenta.INNERHTML = "Um melhor site para aprender habilidades";
);

Esconder a dica de ferramenta no “MouseOutEvento definindo o “visibilidade"Propriedade para"escondido”:

LH.addEventListener ("mouseout", function ()
dip de ferramenta.estilo.visibilidade = "oculto";
);

Crie um ID “#MyToolTip”Na folha de estilo que irá estilizar a dica de ferramenta:

#mytooltip
Visibilidade: escondida;
Largura: 200px;
Z-Index: 1;
cor de fundo: RGB (107, 101, 101);
Alinhamento de texto: centro;
cor branca;
preenchimento: 5px 0;
Radio de fronteira: 3px;
Esquerda: 50%;

Como você pode ver, a dica de ferramenta foi implementada com sucesso no texto:

Como criar dica de ferramenta usando HTML e CSS?

Você também pode criar uma dica de ferramenta sem JavaScript. No arquivo html, crie o texto “Linuxhint”, Onde a dica de ferramenta será mostrada enquanto pairava nela. Crie elemento para definir o texto para a dica de ferramenta dentro do cabeçalho/texto

marcação:

Linuxhint
class = "ToolTipText">
Uma plataforma para aprender habilidades

Na folha de estilo, crie uma classe ou um ID que será atribuído aos elementos HTML. Aqui, vamos criar uma classe “dip de ferramenta”Isso é atribuído ao cabeçalho:

.ToolTip
Posição: relativa;
Exibição: bloco embutido;

Defina uma classe “ToolTipText”Para estilizar o texto da dica de ferramenta e atribuí -lo o html“" marcação:

.ToolTipText
Visibilidade: escondida;
Largura: 150px;
cor de fundo: RGB (107, 101, 101);
Cor: #FFF;
Alinhamento de texto: centro;
preenchimento: 5px 0;
Radio de fronteira: 3px;
Posição: Absoluto;
Z-Index: 1;
Inferior: 125%;
Esquerda: 50%;
margem -esquerda: -60px;
opacidade: 0;
Transição: Opacity 0.3s;

Definir "flutuar”Efeito com o“dip de ferramenta”Classe para mostrar a dica de ferramenta sobre o efeito pairar:

.Distip de ferramentas: Passe o mouse .ToolTipText
visibilidade: visível;
opacidade: 1;

Saída

Compilamos todas as instruções necessárias relevantes para a pista de ferramentas JavaScript simples.

Conclusão

Para criar uma dica de ferramenta usando JavaScript, use o “passe o rato por cima" e "MouseOut”Eventos, que mostram a dica de ferramenta no mouse no elemento e o esconde quando o evento do mouseout é acionado. Para modelar a dica de ferramenta, use o “estilo”Atributo em JavaScript. Neste artigo, demonstramos os melhores exemplos possíveis de criação de uma dica de ferramenta usando JavaScript simples, JavaScript com CSS e uma dica de ferramenta sem JavaScript.