Como mostrar, posição e estilo uma dica de ferramenta em HTML e CSS?

Uma dica de ferramenta é chamada de elemento que fornece informações adicionais sobre um elemento HTML. Esta informação extra é exibida toda vez que o usuário traz o cursor do mouse sobre esse elemento específico. Essas dicas de ferramentas desempenham um papel importante na atualização de um design da web, porque usá -las impedirá que você exiba qualquer informação extra na página da web que não pareça bem, caso contrário,. Neste artigo, esclareceremos como mostrar, posição e estilo de uma dica de ferramenta em HTML e CSS.

Antes de mergulharmos em outros detalhes sobre uma dica de ferramenta, vamos primeiro aprender a criar uma dica de ferramenta primária.

Como criar/mostrar uma dica de ferramenta

O exemplo abaixo demonstra como criar uma dica de ferramenta básica.

Html

Traga mouse sobre mim Texto da dica de ferramenta

No código acima, criamos um elemento div e colocamos algum conteúdo dentro dele e, usando um elemento de span, estamos adicionando um texto da dica de ferramenta dentro do elemento div. Observe que a div foi atribuída a dica de ferramenta de classe, enquanto isso, o elemento de span recebeu a classe ToolTipText.

CSS

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

.dip de ferramenta .ToolTipText
Visibilidade: escondida;
Background-Color: Rosybrown;
cor branca;
Radio de fronteira: 7px;
preenchimento: 5px 10px;
Posição: Absoluto;
Z-Index: 1;

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

Aqui estamos dando ao elemento div uma posição relativa para posicionar o texto da dica de ferramenta e exibi-lo como um elemento de bloco em linha para que a dica de ferramenta seja colocada ao lado do elemento div. Além disso, com relação a essa div, estamos ajustando a posição da dica de ferramenta como absoluta. Além disso, a visibilidade da dica de ferramenta está oculta, mas quando o cursor do mouse é trazido sobre o elemento div, a dica de ferramenta será visível.

Saída

Uma dica de ferramenta foi criada com sucesso.

Agora que sabemos como fazer uma dica de ferramenta, vamos explorar como posicionar a dica de ferramenta.

Como posicionar uma dica de ferramenta

Existem quatro tipos de posições que você pode atribuir a uma dica de ferramenta e são mencionados abaixo.

1. Principal
2. Fundo
3. Esquerda
4. Certo

Todas essas posições são demonstradas abaixo com a ajuda de exemplos.

Como posicionar uma dica de ferramenta no topo

Com o objetivo de posicionar uma dica de ferramenta no topo, usaremos o exemplo usado acima.

CSS

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

.dip de ferramenta .ToolTipText
Visibilidade: escondida;
Background-Color: Rosybrown;
cor branca;
Radio de fronteira: 7px;
preenchimento: 5px 10px;
/ * Para definir a posição superior da dica de ferramenta */
Posição: Absoluto;
Z-Index: 1;
Inferior: 100%;
Esquerda: 60%;
margem -esquerda: -65px;

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

Para fins de posicionar a dica de ferramentas, estamos usando o valor absoluto da propriedade de posição para que ela possa ser colocada em relação ao elemento div. Além disso, para colocá-lo na frente do elemento, estamos dando uma ordem de pilha de 1 usando a propriedade Z-Index. Além disso, para colocá-lo exatamente acima do elemento que definimos as propriedades inferiores, esquerda e margem-esquerda.

Saída

A dica de ferramenta recebeu a posição superior.

Como posicionar uma dica de ferramenta na parte inferior

Para posicionar uma dica de ferramenta na parte inferior, considere o exemplo abaixo.

CSS

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

.dip de ferramenta .ToolTipText
Visibilidade: escondida;
Background-Color: Rosybrown;
cor branca;
Radio de fronteira: 7px;
preenchimento: 5px 10px;/ * para definir a posição inferior da dica de ferramenta */
Posição: Absoluto;
Z-Index: 1;
Os 100 melhores%;
Esquerda: 60%;
margem -esquerda: -65px;

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

O valor absoluto da propriedade da posição posiciona a dica de ferramenta em relação ao elemento div. Além disso, a ordem da pilha da dica de ferramenta é definida como 1 para colocá -la em frente ao contêiner div. Além disso, para colocá-lo exatamente abaixo do elemento que definimos as propriedades superior, esquerda e margem-esquerda.

Saída

A dica de ferramenta foi posicionada no fundo.

Como posicionar uma dica de ferramenta para a esquerda

Se você deseja posicionar sua dica de ferramenta à esquerda de um elemento, consulte o exemplo abaixo.

CSS

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

.dip de ferramenta .ToolTipText
Visibilidade: escondida;
Background-Color: Rosybrown;
cor branca;
Radio de fronteira: 7px;
preenchimento: 5px 10px;
/ * Para definir a posição esquerda da dica de ferramenta */
Posição: Absoluto;
Z-Index: 1;
Top: -6px;
Direita: 102%;

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

Além da posição e propriedades do INDEX Z, estamos usando as propriedades superior e direita, bem como posicionar a dica de ferramenta exatamente à esquerda do elemento especificado.

Saída

Posicionou com sucesso a dica de ferramenta à esquerda.

Como posicionar uma dica de ferramenta para a direita

Aqui demonstramos como você pode posicionar uma dica de ferramenta à direita de um elemento.

CSS

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

.dip de ferramenta .ToolTipText
Visibilidade: escondida;
Background-Color: Rosybrown;
cor branca;
Radio de fronteira: 7px;
preenchimento: 5px 10px;/ * para definir a posição correta da dica de ferramenta */
Posição: Absoluto;
Z-Index: 1;
Top: -6px;
Esquerda: 102%;

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

Aqui estamos usando as propriedades superior e esquerda para definir a posição da dica de ferramenta à direita de um elemento.

Saída

A dica de ferramenta foi ajustada para a direita.

Como estilizar uma dica de ferramenta

Nos exemplos acima, estilizamos a dica de ferramenta usando algumas propriedades básicas do CSS, como cor de fundo, cor, alinhamento de texto, radiato de borda e preenchimento. No entanto, existem outras maneiras de estilizar uma dica de ferramenta também. Aqui mostramos alguns deles.

Adicionando uma seta à dica de ferramenta

Com o objetivo de adicionar uma flecha, como um discurso de bolha, considere o exemplo abaixo.

CSS

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

.dip de ferramenta .ToolTipText
Visibilidade: escondida;
Background-Color: Rosybrown;
cor branca;
Radio de fronteira: 7px;
preenchimento: 5px 10px;
Posição: Absoluto;
Z-Index: 1;
Inferior: 150%;
Esquerda: 50%;
margem -esquerda: -60px;

.dip de ferramenta .ToolTipText :: After
contente: "";
Posição: Absoluto;/ * Para posicionar a dica de ferramenta */
Os 100 melhores%;
Esquerda: 50%;
margem -esquerda: -6px;
/ * Para adicionar uma seta */
borda: 6px sólido;
cor de fronteira: transparente transparente transparente de rosybrown;

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

Aqui estamos usando o: Após o pseudo-elemento para exibir a seta de um lado específico da dica de ferramenta; portanto, o conteúdo após a dica de ferramenta ficar vazio. No entanto, para criar a flecha, a propriedade da fronteira é usada. Para manter a flecha no centro da dica de ferramenta, as propriedades de largura de borda e margem-esquerda devem receber o mesmo, mas oposto nos valores de sinal.

Estamos usando a propriedade da cor da fronteira para dar cor a cada borda da flecha. Somente a borda superior recebe a cor rosybrown e o restante é definido como transparente. Se todos tivessem alguma cor, a flecha apareceria como um quadrado.

Por fim, a dica de ferramenta e a flecha foram colocadas acima do elemento. Se você deseja posicionar a dica de ferramenta junto com uma seta para qualquer outra posição, consulte os exemplos dados acima.

Saída

Adicionou com sucesso uma flecha à dica de ferramenta.

Como adicionar um efeito de desbotamento à dica de ferramenta

Para dar um certo efeito, por exemplo, um efeito de desbotamento na dica de ferramenta, considere o exemplo abaixo.

CSS

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

.dip de ferramenta .ToolTipText
Visibilidade: escondida;
Background-Color: Rosybrown;
cor branca;
Radio de fronteira: 7px;
preenchimento: 5px 10px;
Posição: Absoluto;
Z-Index: 1;
Inferior: 150%;
Esquerda: 50%;
margem-esquerda: -60px;/ * para adicionar um efeito de desbotamento à dica de ferramenta */
opacidade: 0;
transição: opacidade 2s;

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

No código acima, para fazer a dica de ferramenta desaparecer quando o mouse paira sobre o elemento, a propriedade de transição é usada junto com a propriedade Opacity. A duração da transição foi definida como 2 segundos, o que significa que levará 2 segundos para a dica de ferramenta passar de ser invisível para completamente visível.

Saída

O efeito de desbotamento está funcionando corretamente.

Conclusão

Uma dica de ferramenta é chamada de elemento que fornece informações extras sobre um elemento toda vez que um cursor do mouse é trazido sobre esse elemento. Para adicionar uma dica de ferramenta em um elemento, a propriedade de posição é utilizada com base no local onde você deseja mostrar a dica de ferramenta. Além disso, você pode adicionar uma seta ou um efeito de desbotamento à dica de ferramenta para dar algum estilo. Neste artigo, esclarecemos como mostrar, posição e estilo de uma dica de ferramenta usando HTML e CSS.