Veja nesse artigo
Introdução
O tooltip é uma explicação breve ou dica sobre alguma funcionalidade específica.
Eu costumo utilizar bastante em botões, normalmente botões que só tem o ícone, coloco um tooltip para indicar a ação do botão.
Por exemplo, um botão que só tem um X, costumo colocar a explicação “fechar”.
E dessa forma indica ao usuário qual ação está relacionada ao botão.
Porém é possível colocar em textos, imagens, blocos, onde precisar ter essa breve explicação, é possível por.
Os frameworks modernos podem trazer esse recurso para ser utilizado, porém caso você queira saber como funcione, ou então caso você queira personalizar o tooltip, é uma boa saber como fazer.
Preview
HTML
O HTML é simples, vou colocar em uma div, caso o usuário passe o mouse por cima, será exibido a dica.
O código HTML fica assim:
<link rel="stylesheet" href="style.css" />
<div class="tip">
Passe o mouse
<span class="tiptext">Dica de texto</span>
</div>
CSS
O CSS vai ter algumas etapas, para que o tooltip seja apresentado corretamente.
Na primeira parte vai ter o estilo do texto que ao passar o mouse por cima vai exibir a dica, esse estilo é simples.
.tip {
margin-top: 50px;
margin-left: 50px;
position: relative;
display: inline-block;
}
A próxima parte é fazer esconder o texto de dica, para aparecer somente ao passar o mouse.
Também vai ter o estilo da dica em si, com a cor do texto branca e cor de fundo cinza.
Além disso tem o posicionamento e a transição na opacidade ao passar o mouse.
.tip .tiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
Após isso tem o estilo de uma seta somente para indicar que aquela dica é relacionada aquele texto.
.tip .tiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
E por fim a mágica de fazer aparecer a dica assim que passar o mouse por cima:
.tip:hover .tiptext {
visibility: visible;
opacity: 1;
}
O efeito é trocar a visibilidade e opacidade do elemento que está escondido, para aparecer assim que o usuário passar o mouse por cima.
Somente com esse código já chegará no resultado mostrado no preview.
Código fonte
O código fonte desse conteúdo está no meu CodeSandbox, e você pode acessar neste link.
Para ver outros canais onde o posto conteúdo sobre HTML, CSS e Javascript, veja os Links do Programando Soluções.
Conclusão
Trazer essa dica de texto pode ajudar bastante o seu usuário, ainda mais dependendo do tipo de sistema com que trabalha.
Como já é um recurso implementado por frameworks, é comum os usuários passarem o mouse por cima de algo esperando uma dica.
Esse recurso existem também só no HTML, porém sem o estilo mostrado.
Recomendo que veja como funciona, tente adaptar para outros casos, mudar o estilo, trocar o posicionamento, isso pode ajudar a entender mais como esse recurso funciona.
Referências
https://userguiding.com/pt-br/blog/tooltips/