Executando verificação de segurança...
1

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; 
    }
}

Carregando publicação patrocinada...