JSFiddle - React, Tailwind, and code Playground

HTML

<a data-tooltip="" class="social-link facebook" href="http://www.facebook.com/zuck" title=" Follow Zuck on facebook " target="_blank"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="facebook-icon" x="0" y="0" width="16" height="16" viewBox="0 0 11.861 23.303"><path d="M11.861,8.323H7.594V6.243c0,0-0.239-1.978,1.144-1.978c1.563,0,2.811,0,2.811,0V0H6.763c0,0-4.005-0.017-4.005,4.005c0,0.864-0.004,2.437-0.01,4.318H0v3.434h2.741c-0.016,5.46-0.035,11.545-0.035,11.545h4.888V11.757h3.226L11.861,8.323z"></path></svg><strong>F</strong></a>

CSS

/**
 * Demo styles
 * Not needed for tooltips to work
 */

/* `border-box`... ALL THE THINGS! */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 64px auto;
  text-align: center;
  font-size: 100%;
  max-width: 640px;
  width: 94%;
}

a:hover {
  text-decoration: none;
}

header,
.demo,
.demo p {
  margin: 4em 0;
  text-align: center;
}

/**
 * Social links
 */
.social-link {
    display: inline-block;
    position: relative;
    width: 2em;
    height: 2em;
    margin: 0px 0.5em 1em 0px;
    padding: 0px;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    outline: medium none;
    color: #FFF;
    font: 300 1em "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
}

.social-link svg {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: 1em;
    height: 1em;
}

.social-link strong {
    display: none;
}

.facebook path {
    fill: #fff;
}

.facebook {
    background: #3B5998 none repeat scroll 0% 0%;
    border: 1px solid #3B5998;
}

/**
 * Tooltip Styles by Chris Bracco
 * @Source: http://codepen.io/cbracco/pen/nufHz
 */

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
  position: relative;
  cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 
	  opacity 0.2s ease-in-out,
		visibility 0.2s ease-in-out,
		-webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition:    
		opacity 0.2s ease-in-out,
		visibility 0.2s ease-in-out,
		-moz-transform 0.2s cubic-bezier(0.71, 1.7,...

JavaScript

/*! Simple transfert for title contents into data-tooltip attributes by cara-tm.com, MIT license. */
var dotooltips=function(){"use strict";if(document.querySelectorAll)for(var t=document.querySelectorAll("[data-tooltip]"),e=t.length;e-->0;){var o=t[e].getAttribute("title");t[e].setAttribute("data-tooltip",o);t[e].removeAttribute("title");}};dotooltips();