"Social Share - Tooltip"
Bootstrap 3.3.0 Snippet by SOJITRA

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="container"> <div class="social-cont"> <div class="col-md-4"> <span class="inline"><i class="fa fa-thumbs-up up"></i> 150</span> <span class="inline"><i class="fa fa-thumbs-down down"></i> 21</span> </div> <div class="col-md-8"> <div class="social"> <span class="text-right"><p>Share on Social</p></span> <a class="social-icon facebook" target="blank" data-tooltip="Facebook" href="http://www.facebook.com/SOJITRAHIREN"> <i class="fa fa-facebook"></i> </a> <a class="social-icon twitter" target="blank" data-tooltip="Twitter" href="https://www.twitter.com/Sojitra_Hiren"> <i class="fa fa-twitter"></i> </a> <a class="social-icon linkedin" target="blank" data-tooltip="LinkedIn" href="https://www.linkedin.com/in/hirensojitraamreli"> <i class="fa fa-linkedin"></i> </a> <a class="social-icon google-plus" target="blank" data-tooltip="Google +" href="https://plus.google.com/+HirenSojitraa"> <i class="fa fa-google-plus"></i> </a> <a class="social-icon email" target="blank" data-tooltip="Contact e-Mail" href="mailto:hirensojitra007@gmail.com"> <i class="fa fa-envelope-o"></i> </a> </div> </div> <div class="clearfix"> </div> </div> </div>
.social-cont{ border-style: solid; border-width: 1px; border-color: rgb(238, 238, 238); background-color: rgba(240, 240, 240, 0); padding-top:7px; padding-bottom:7px; display: table; width: 100%; margin-top: 15px; margin-bottom: 30px; } .social-cont span.inline{ display: table-cell; vertical-align: middle; height: 38px; font-size: 16px; font-family: "Roboto Bold"; padding-right: 15px; } .social-cont span.inline i{ font-size: 20px; } .social-cont span.inline i.up{ color: #00b226; } .social-cont span.inline i.down{ color: #b20000; } .social-cont .social{ text-align: right; display: inline-block; float: right; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(1.334em) translateZ(0); } 100% { opacity: 1; } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(1.334em) translateZ(0); } 100% { opacity: 1; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(1.334em) translateZ(0); -moz-transform: translateX(1.334em) translateZ(0); -ms-transform: translateX(1.334em) translateZ(0); -o-transform: translateX(1.334em) translateZ(0); transform: translateX(1.334em) translateZ(0); } 100% { opacity: 1; } } .social span.text-right{ display: table; float: left; height: 38px; vertical-align: middle; } .social span.text-right p{ margin: 0; padding: 0; display: table-cell; vertical-align: middle; padding-right: 10px; font-size: 16px; font-family: "Roboto Semi Bold"; color: rgb(68, 68, 68); line-height: 1.2; } a.social-icon, a.social-icon:visited { -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transition-property: background-color; -moz-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; transition-timing-function: ease; background-color: #f0f0f0; text-align: center; display: inline-block; width: 35px; height: 35px; padding: 5px 0px; color: #444; margin: 2px; font-size: 20px; display: table; float: left; border-style: solid; border-width: 1px; border-color: rgb(204, 204, 204); border-radius: 4px; /* Color each button differently */ } a.social-icon:focus, a.social-icon:active, a.social-icon:hover{ text-decoration: none; color: #FFF; border:none; } .social-icon i{ display: table-cell; vertical-align: middle; text-align: center; height: 100%; width: 100%; } .social-icon.facebook { /* Animation */ -webkit-animation: fadeInRight 0.6s 0.25s forwards; animation: fadeInRight 0.6s 0.25s forwards; opacity: 0; /* Color */ } .social-icon.facebook:hover , .social-icon.facebook:active, .social-icon.facebook:focus { opacity: 1; background-color: #0077b2; } .social-icon.twitter { /* Animation */ -webkit-animation: fadeInRight 0.6s 0.5s forwards; animation: fadeInRight 0.6s 0.5s forwards; opacity: 0; /* Color */ } .social-icon.twitter:hover, .social-icon:nth-child(2):active, .social-icon:nth-child(2):focus { opacity: 1; background-color: #008cb2; } .social-icon.linkedin { /* Animation */ -webkit-animation: fadeInRight 0.6s 0.75s forwards; animation: fadeInRight 0.6s 0.75s forwards; opacity: 0; /* Color */ } .social-icon.linkedin:hover, .social-icon.linkedin:active, .social-icon.linkedin:focus { opacity: 1; background-color: #00a1b2; } .social-icon.google-plus { /* Animation */ -webkit-animation: fadeInRight 0.6s 1s forwards; animation: fadeInRight 0.6s 1s forwards; opacity: 0; /* Color */ } .social-icon.google-plus:hover, .social-icon.google-plus:active, .social-icon.google-plus:focus { opacity: 1; background-color: #e3401d; } .social-icon.email { /* Animation */ -webkit-animation: fadeInRight 0.6s 1.25s forwards; animation: fadeInRight 0.6s 1.25s forwards; opacity: 0; /* Color */ } .social-icon.email:hover, .social-icon.email:active, .social-icon.email:focus { opacity: 1; background-color: #e3401d; } .social-icon img { width: 20px; } /* ============================ */ /* TOOLTIP */ /* ============================ */ [data-tooltip] { position: relative; /* tooltip arrow */ /* tooltip box */ } [data-tooltip]:before, [data-tooltip]:after { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: absolute; top: 100%; left: 50%; -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; transition-timing-function: linear; position: absolute; left: 50%; top: 100%; bottom: 100%; visibility: hidden; opacity: 0; z-index: 9999; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } [data-tooltip]:before { content: ""; border-color: #323232; border-style: none; border: 5px solid transparent; border-bottom: 6px solid #323232; margin-top: -4px; } [data-tooltip]:after { content: attr(data-tooltip); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: auto; height: 22px; padding: 11px 11px 0 11px; font-size: 13px; line-height: 11px; white-space: nowrap; background-color: #323232; color: #ecf0f1; margin-top: 7px; } [data-tooltip]:hover, [data-tooltip]:focus { background-color: transparent; } [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after { -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 1; visibility: visible; } @media screen and (max-width: 767px){.social-cont{ margin-bottom: 0px; margin-left: -15px; margin-right: -15px; min-width: calc(100% + 30px); overflow: hidden; } } @media screen and (max-width:348px){ .social-cont .social-icon{ height:29px; width: 29px; font-size: 18px; } }

Related: See More


Questions / Comments: