<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

<ul class="social">
  <li>
    <a href="https://twitter.com/share?url=URLTOSHARE" class="tw" title="Tweet this page!">
      <i class="icon-twitter"></i>
    </a>
  </li>
  <li>
    <a href="https://www.facebook.com/sharer.php?u=URLTOSHARE&amp;t=TITLE" class="fb" title="Share this page!">
      <i class="icon-facebook"></i>
    </a>
  </li>
  <li>
    <a href="https://plus.google.com/share?url=URLTOSHARE" class="gp" title="Share this page!">
      <i class="icon-google-plus"></i>
    </a>
  </li>
</ul>

.social {
  border-radius: 3px;
  box-shadow: 0 1px 0 #e9e9e9 inset;
  background: #f3f3f3;
  border-color: #d1d1d1 #e7e7e7 #e4e4e4;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 0 #e9e9e9 inset;
  float: left;
  list-style: none;
  padding: 15px 10px;
  position: relative;
  text-align: center;
  margin: 20px;
}

.social li:first-child {
  margin-top: 0
}

.social li {
  margin-top: 10px
}

.social li a {
  display: block;
  background: #999999;
  color: #efefef;
  border-radius: 15px;
  text-decoration: none;
  line-height: 30px;
  width: 30px;
  font-size: 18px;
}

.social a.tw:hover {
  background: #00acee
}

.social a.fb:hover {
  background: #3b5998
}

.social a.gp:hover {
  background: #dd4b39
}

$(function() {
  $('.social a').tooltip({
    placement: "right",
    container: 'body'
  });
});