Também é possível! Ao invés de hover
, você poderia mudar para focus
. Este é um exemplo generalista. Também é possível ter tanto o hover
quanto o focus
.
Exemplo:
/* configuração básica para a <div>. */
.tooltip {
position: relative;
cursor: pointer;
/* Estilos para o tooltip */
&::after {
position: absolute; /* Seu posicionamento é relativo a div pai */
content: attr(data-tooltip) /* extrai o valor do atributo */
/* para centralizar o elemento */
left: 50%;
transform: translateX(-50%);
/* Ajuste conforme necessário */
bottom: 120%;
/* estilos para dar o charme */
padding: 0.62rem; /* aproximadamente 10px */
border-radius: 1.25rem; /* 20px */
background-color: #212121;
color: #eeeeee;
white-space: nowrap;
/* ele é invisível por padrão*/
visibility: hidden;
}
&:focus::after {
/* é necessário substituir a <div> por algum <input> ou <button> */
visibility: visible;
}
&:hover::after {
/* Quando passar por cima da <div>, o tooltip irá aparecer */
visibility: visible;
}
}