Dica para aparecer nos sites: Biografia, Blog e Portfolio quando passar a mouse nos links das redes sociais.

Bom dia. Não é uma dúvida. Eu só queria que aparece-se os textos quando passa-se o mouse em todos os sites que tem as redes sociais. Então o que eu fiz? Em vez de colocar os controles em cada .css do bio, blog ou portfolio. Eu coloquei o controle no site.css e repeti as informações nos html do bio.html, blog.html e do portfolio.html, seja o código em anexo. Funcionou diretinho.

bio.html
<ul class="icones-redes-sociais hover focus">
            <li>
                <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>
            </li>
        </ul>

blog.html
  <ul class="icones-redes-sociais hover focus">
            <li>
                <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>
            </li>
        </ul>

portfolio.html
 <ul class="icones-redes-sociais hover focus">
            <li>
                <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>
            </li>
        </ul>

site.css
.icones-redes-sociais a {
    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;
}