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 botão “ passe o rato por cima ' e ' mouseout ” eventos. Siga os exemplos abaixo para uma melhor compreensão.
Exemplo 1: dica de ferramenta usando JavaScript
No exemplo fornecido, criaremos uma dica de ferramenta em JavaScript puro e também estilizaremos a dica de ferramenta usando o “ estilo ” atributo.
Primeiro, crie um texto onde queremos mostrar uma dica de ferramenta no evento mouseover:
< id h5 = 'texto' > Linux h5 >
Obtenha o texto onde a dica de ferramenta aparecerá usando o botão “ getElementById() ” método:
onde lh = documento. getElementById ( 'texto' ) ;
Agora, ligue para o “ addEventListener() ” método passando o “ passe o rato por cima ” e uma função () como parâmetro. Na função definida, primeiro, criaremos uma dica de ferramenta criando um “ div ” elemento, defina o texto que será mostrado ao passar o mouse e defina algum estilo da dica de ferramenta usando o “ estilo ” atributo. Por fim, adicione a dica de ferramenta usando o botão “ appendChild() ” método:
lh. addEventListener ( 'passe o rato por cima' , função ( ) {foi dica de ferramenta = documento. criarElemento ( 'div' ) ;
dica de ferramenta. HTML interno = 'Um melhor site para aprender habilidades' ;
dica de ferramenta. estilo . visibilidade = 'visível' ;
dica de ferramenta. estilo . posição = 'absoluto' ;
dica de ferramenta. estilo . cor de fundo = 'rgb (107, 101, 101)' ;
dica de ferramenta. estilo . preenchimento = '5px' ;
dica de ferramenta. estilo . borderRadius = '3px' ;
dica de ferramenta. estilo . cor = 'branco' ;
dica de ferramenta. estilo . esquerda = 'cinquenta%' ;
dica de ferramenta. estilo . largura = '200 px' ;
documento. corpo . anexarFilho ( dica de ferramenta ) ;
} ) ;
Aqui, utilize o “ mouseout ” evento que removerá a dica de ferramenta enquanto o cursor se afastará do texto:
lh. addEventListener ( 'rato para fora' , função ( ) {
documento. corpo . removerCriança ( dica de ferramenta ) ;
} ) ;
Saída
Exemplo 2: dica de ferramenta usando JavaScript com CSS
Você também pode criar uma dica de ferramenta em JavaScript com CSS.
Para isso, crie uma área para mostrar o texto da dica de ferramenta usando a tag e atribua um id “ #myTooltip ”:
< ID do span = 'minha dica de ferramenta' > período >Obtenha as referências do texto e a dica de ferramenta usando o botão “ getElementById() ” método:
onde lh = documento. getElementById ( 'texto' ) ;foi dica de ferramenta = documento. getElementById ( 'minha dica de ferramenta' ) ;
Chame a dica de ferramenta no “ passe o rato por cima ” definindo o texto na função usando o botão “ HTML interno ' propriedade:
lh. addEventListener ( 'passe o rato por cima' , função ( ) {dica de ferramenta. estilo . visibilidade = 'visível' ;
dica de ferramenta. HTML interno = 'Um melhor site para aprender habilidades' ;
} ) ;
Oculte a dica de ferramenta no “ mouseout ” configurando o evento “ visibilidade ” propriedade para “ escondido ”:
lh. addEventListener ( 'rato para fora' , função ( ) {dica de ferramenta. estilo . visibilidade = 'escondido' ;
} ) ;
Crie um id “ #myTooltip ” na folha de estilo que estilizará a dica de ferramenta:
#myTooltip {visibilidade : escondido ;
largura : 200px ;
Com - índice : 1 ;
fundo - cor : rgb ( 107 , 101 , 101 ) ;
texto - alinhar : Centro ;
cor : branco ;
preenchimento : 5px 0 ;
fronteira - raio : 3px ;
esquerda : cinquenta %;
}
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 “ Linux ”, onde a dica de ferramenta será mostrada ao passar o mouse sobre ela. Crie o elemento para definir o texto da dica de ferramenta dentro da tag header/text :
Linux
< período aula = 'texto de dica de ferramenta' >
Uma plataforma para aprender habilidades
período >
h5 >
Na folha de estilo, crie uma classe ou um id que será atribuído aos elementos HTML. Aqui, vamos criar uma classe “ dica de ferramenta ” que é atribuído ao cabeçalho:
. dica de ferramenta {posição : relativo ;
mostrar : em linha - bloquear ;
}
Definir uma classe “ texto da dica de ferramenta ” para estilizar o texto da dica de ferramenta e atribuir a ele o HTML “
visibilidade : escondido ;
largura : 150px ;
fundo - cor : rgb ( 107 , 101 , 101 ) ;
cor : #fff ;
texto - alinhar : Centro ;
preenchimento : 5px 0 ;
fronteira - raio : 3px ;
posição : absoluto ;
Com - índice : 1 ;
fundo : 125 %;
esquerda : cinquenta %;
margem - esquerda : - 60px ;
opacidade : 0 ;
transição : opacidade 0,3s ;
}
Definir ' flutuar ” efeito com o “ dica de ferramenta ” para mostrar a dica de ferramenta sobre o efeito hover:
. dica de ferramenta : flutuar . texto da dica de ferramenta {visibilidade : visível ;
opacidade : 1 ;
}
Saída
Compilamos todas as instruções necessárias relevantes para a dica de ferramenta JavaScript simples.
Conclusão
Para criar uma dica de ferramenta usando JavaScript, use o botão “ passe o rato por cima ' e ' mouseout ”, que mostra a dica de ferramenta ao passar o mouse sobre o elemento e a oculta quando o evento mouseout é acionado. Para estilizar a dica de ferramenta, use o botão “ estilo ” em JavaScript. Neste artigo, demonstramos os melhores exemplos possíveis de como criar uma dica de ferramenta usando JavaScript simples, JavaScript com CSS e uma dica de ferramenta sem JavaScript.