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