Não aparece nada quando passo o mouse

<a href="https://github.com/joaodasilva" class="github" data-tooltip="Veja meus projetos opensource">
                    Github
                </a>
            </li>
            <li>
                <a href="https://twitter.com/joaodasilva" class="twitter" data-tooltip="Siga-me no twitter">
                    Twitter
                </a>
            </li>
            <li>
                <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin" data-tooltip="Veja meu currículo">
                    LinkedIn
                </a>

.icones-redes-sociais a {
    width: 40px;
    height: 40px;
    display: block;
    text-indent: -9999px;
    position: relative;
}

.icones-redes-sociais a:hover::after, .icones-redes-sociais a:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    right: 0;
    text-indent: 0;
    width: 300%;
    background: black;
    font-size: .75em;
}