Social Icons Tooltip

HTML
<div> <a href="#"> <i class="fa fa-facebook" aria-hidden="true"> <span>Facebook</span> </i> </a> <a href="#"> <i class="fa fa-twitter" aria-hidden="true"> <span>Twitter</span> </i> </a> <a href="#"> <i class="fa fa-pinterest" aria-hidden="true"> <span>Pinterest</span> </i> </a> <a href="#"> <i class="fa fa-tumblr" aria-hidden="true"> <span>Tumblr</span> </i> </a> </div>
SCSS
body { background-color: darken(#2980b9, 10%); text-align: center; } div { display: inline-flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } a { color: #fff; background: lighten(#3498db, 10%); border-radius: 4px; text-align: center; text-decoration: none; position: relative; display: inline-block; width: 40px; height: 40px; padding-top: 12px; margin: 0 14px; transition: all .5s; box-sizing: border-box; } a:hover { background: darken(#3498db, 2%); } a span { color: #666; position: absolute; font-family: sans-serif; bottom: 0; left: -25px; right: -25px; padding: 5px 7px; z-index: -1; font-size: 14px; border-radius: 2px; background: #fff; visibility: hidden; opacity: 0; transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } a span:before { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; position: absolute; bottom: -5px; left: 40px; } a:hover span { bottom: 50px; visibility: visible; opacity: 1; }
JAVASCRIPT
Expand for more options Login