É 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!