É possível fazer um tooltip com CSS puro?
Sim, é possível criar um tooltip usando apenas CSS puro. Uma maneira comum de fazer isso é usando a propriedade ::after ou ::before.
Aqui está um exemplo de como você pode criar um tooltip usando apenas CSS:
HTML:
<div class="tooltip">
<span class="tooltiptext">Texto do tooltip</span>
HOVER ME
</div>CSS:
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #000;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}Neste exemplo, a classe tooltip contém o elemento que receberá o tooltip. O elemento <span> com a classe tooltiptext contém o texto do tooltip. O tooltip só será exibido quando o usuário passar o mouse sobre o elemento que possui a classe tooltip.
A propriedade position: relative; é usada para posicionar o elemento de tooltip em relação ao elemento pai. A propriedade visibility é utilizada para controlar a visibilidade do tooltip, enquanto a propriedade opacity é usada para controlar a transparência. Quando o usuário passa o mouse sobre o elemento de tooltip, a visibilidade é alterada para visible e a opacidade é alterada para 1, tornando o tooltip visível.
Espero que isso te ajude a criar um tooltip usando apenas CSS puro!