Menu tooltip con Css3

<style>
/* FoulsCode.blogspot.gr */
html {
padding: 0;
margin: 0;
height: 100%;
background: #F7F7F7;
box-shadow: inset 0px 0px 1000px 50px rgba(0, 0, 0, 0.38);
-webkit-box-shadow: inset 0px 0px 1000px 50px rgba(0, 0, 0, 0.38);
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.center{
margin: 250px 15px
}
.nav-tt{
 padding: 50;
 width: 70%;
 height: 70px;
 margin: 80px auto 30px auto;

}
.nav-tt li{
 float: left;
 list-style: none;
}
.nav-tt li a{
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 2px;
    outline: none;
 position: relative;
 z-index: 2;
    text-indent: -9000px;
    text-decoration: none;
}
.nav-tt li .gplus{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzZsaSoR7ZvvLybuK0Pyqbv7grPPB1ftB5WA2HAHNeJqCZClMLP-gyj40H1VwGXwTBZG-otQ9YGhKExKx_Yas4Zz4xTGHBEC-QYwfmc4YjGQBYmNQhmVqASQIISSWmXtID7ZqxBDqz1bBi/s128/google_plus.png) no-repeat;
}
.nav-tt li .twitter{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNxO5GW3XXmvk21ucECkTsCmfTt7OJATclA9S2fkDIk2n7VpzTR6wjQQ_SZ-S3YeXz_bgqp9fbGA5d9J4-5QlU_m3W9apHQQMr1ksGJ2gF7AOQfzbXRthLe0bUhbT2nQyaZqwJca9aDIwU/s128/twitter_1.png) no-repeat;
}
.nav-tt li .pinterest{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVNyqFK7j1uVld-frX8HwpxtZ-0xkz1y5oNOks1FHXzyi7KBJMq61jrqsFDlbhv710w1-XKR1P4_1C1gUaLuaf0oe0RMXtmoGVsSZjGsEPKZSxKBzC_UjU7qSPf5Q90PD4Kgm87wJEQyhv/s128/pinterest.png) no-repeat;
}
.nav-tt li .facebook{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOcKjG44rlHLhoZ4QLQZLYOrrSSqcysLjIQw9l7YGjJHD5bCU94Z7Ux29mFEHjOetEQl287PpQeIIOWGZXdbIHYzzctfpbN8cX6zonlK5qmhyphenhyphen5HeveqmLqtjdj0USZKbk79_F-5NvRQs54/s128/fb_1.png) no-repeat;
}
.nav-tt li .linkedin{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxnxx4Z-ZAhyphenhyphenLLtBSdO-LKM8uZGxWC9c5b3ArC3M8xFf8gWDHrYeUUgQClHcge8AQecbdQBFFhcwT6FE7lsDkmLbKb6upsXUbu_xYr6bW7ooASb0e2ggggpGJ62XH0KmgTHsCeIQEpu-Tp/s128/linkedin.png)no-repeat;
}
.nav-tt li .tumblr{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyGHffGioOASbY7pBTk2d4LtOBZsi9Ato2vlkiyv-gg8ki10DsZqUGlaiF5I1yPlK2-OAeCiUfLWbnkb688x4i1QrrNqQAEk7Jl9NeGwmY5A_iiWzxfyZ-kAhTiiUm2bxYN_gllQwV-xYM/s128/tumblr.png) no-repeat;
}
.nav-tt li .youtube{
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCZIbcNCQIMHJpfH0tKuLfd521E1EuJNo7AbOQwHoTVdIghTY0wkD0HW6CGh95Gf1nizxk7Qhx4J2RqNmS_jkEHL0NVjQWFxQO0CotocqWrfB3Hq68GAZdlMvnhhlrqFVfCYOsOYiSTE-7/s128/you_tube.png) no-repeat;
}
.nav-tt li .mail{
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvV1s1QkjVJbz21OidM4Vytm6etcVXWvuD7RVDYh7qor9y9wUDNWs-tdrcwhyn8ffTvbqCmE0tOm03Jt93A8mw6cuX_d37oaUmE99ev7ZDyBbPXjAuTxu4Zb8Nz2hkPT_EkbwJcutQbTLK/s32/email.png) no-repeat;
}
.nav-tt li .rss{
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAylDwd0uokoFn_rWshyphenhyphenHVBKOHoHnZMWojWWx5L63HFG3g_9K8Fm0kCRbo16Gjq74YKYJ9ja2CeBwdyBKZHMxnjJ3P3Wqpo8mqnPqSGigf-955HKyWUQDKV5iFc-tpcZkHuakweJsNgY52/s128/rss.png) no-repeat;
}
.nav-tt li a span{
 width: 80px;
 height: 80px;
 line-height: 80px;
 padding: 10px;
 left: 50%;
 margin-left: -60px;
 font-family: 'Alegreya SC', Georgia, serif;
 font-weight: 400;
 font-style: italic;
 font-size: 14px;
 color: #719DAB;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 text-align: center;
 border: 5px solid #ffffff;
 background: rgba(255,255,255,0.5);
 text-indent: 0px;
 position: absolute;
 pointer-events: none;
 border-radius: 50%;
 bottom: -40px;
 opacity: 0;
 box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -o-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;

}
.nav-tt li a span:before,
.nav-tt li a span:after{
 content: '';
 position: absolute;
 bottom: -15px;
 left: 50%;
 margin-left: -9px;
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-top: 11px solid rgba(0,0,0,0.1);
}
.nav-tt li a span:after{
 bottom: -13px;
 margin-left: -10px;
 border-top: 10px solid #ffffff;
}
.nav-tt li a:hover span{
 opacity: 0.9;
 bottom: 50px;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
}
</style>
<div class="center">
<ul class="nav-tt">
<li><a class="twitter" href="URL" target="_blank"><span>Twitter</span></a></li>
<li><a class="gplus" href="URL" target="_blank"><span>Google Plus</span></a></li>
<li><a class="facebook" href="URL" target="_blank"><span>Facebook</span></a></li>
<li><a class="linkedin" href="URL" target="_blank"><span>LinkedIn</span></a></li>
<li><a class="tumblr" href="URL" target="_blank"><span>Tumblr</span></a></li>
<li><a class="pinterest" href="URL" target="_blank"><span>Pinterest</span></a></li>
<li><a class="youtube" href="URL" target="_blank"><span>Youtube</span></a></li>
<li><a class="mail" href="URL" target="_blank"><span>Mail</span></a></li>
<li><a class="rss" href="URL" target="_blank"><span>RSS</span></a></li>
</ul></div>