Segui exatamente como está na resolução do problema e mesmo assim as legendas não funcionam. Pode me ajudar?

HTML
                <ul class="icones-sociais">
                  <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>


CSS

.icones-sociais a{
    width:40px;
    height:40px;
    display:inline-block;
    font-size:0;
    position:relative;
}

.icones-sociais a:hover::after,
.icones-sociais a:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  right: 0;
  text-indent: 0;
}