CSS Only Tooltip

by Cazuki Hoshina

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<section>
    <div><a href="https://www.facebook.com/" target="_blank" data-tooltip="Facebook"><i class="fa fa-facebook"></i></a></div>
    <div><a href="https://twitter.com/" target="_blank" data-tooltip="Twitter"><i class="fa fa-twitter"></i></a></div>
    <div><a href="https://plus.google.com/" target="_blank" data-tooltip="Google+"><i class="fa fa-google-plus"></i></a></div>
    <div><a href="http://www.linkedin.com/" target="_blank" data-tooltip="Linkedin"><i class="fa fa-linkedin"></i></a></div>
</section>

CSS

section {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    margin: 0 auto;
}

div {
    margin: 0 16px 0 0;
    padding: 4px 0;
    width: 24px;
    border: 1px solid #ebebeb;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
div:last-child {
    margin: 0;
}
div a {
    display: block;
    color: #111111;
    text-decoration: none;
}
div a:hover {
    background: #f8f8f8;
    position: relative;
}
div a:hover:after {
    content: attr(data-tooltip);
    left: 0;
    bottom: -30px;
    font-size: 11px;
    color: #585858;
    position: absolute;
}

a:hover .fa-facebook {color: #3b5998;}
a:hover .fa-twitter {color: #00aef1;}
a:hover .fa-google-plus {color:#dd4b39;}
a:hover .fa-linkedin {color:#0e76a8;}