JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Hover the links below:</h1>
<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>

<a data-tooltip="" class="social-link twitter tooltip-bottom" href="https://twitter.com/jack" title=" Follow Jack on Twitter " target="_blank"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="twitter-icon" x="0" y="0" width="16" height="16" viewBox="0 0 16 16" xml:space="preserve"><path d="M16 3c-0.6 0.3-1.2 0.4-1.9 0.5 0.7-0.4 1.2-1 1.4-1.8-0.6 0.4-1.3 0.7-2.1 0.8C12.9 1.9 12 1.5 11.1 1.5c-1.8 0-3.3 1.5-3.3 3.3 0 0.3 0 0.5 0.1 0.8C5.2 5.4 2.7 4.1 1.1 2.1 0.8 2.6 0.7 3.2 0.7 3.8c0 1.1 0.6 2.1 1.5 2.7C1.6 6.5 1.1 6.3 0.6 6.1v0c0 1.6 1.1 2.9 2.6 3.2C3 9.4 2.7 9.5 2.4 9.5c-0.2 0-0.4 0-0.6-0.1 0.4 1.3 1.6 2.3 3.1 2.3-1.1 0.9-2.5 1.4-4.1 1.4-0.3 0-0.5 0-0.8 0C1.5 14 3.2 14.5 5 14.5c6 0 9.3-5 9.3-9.3L14.4 4.7C15 4.3 15.6 3.7 16 3z"></path></svg></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%
}

h1 {
  margin-bottom: 2em;
  text-align: center;
  color: #aaa;
  font: normal normal normal 1.3em/1 'Helvetica Neue',Helvetica,Arial, sans-serif
}
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,
.twitter path {
    fill: #fff
}

.facebook {
    background: #3b5998;
    border: 1px solid #3b5998
}

.twitter {
  background: #00aced;
  border: 1px solid #00aced
}

/**
 * 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...

JavaScript

/*! Simple transfert for title contents into data-tooltip attributes by cara-tm.com, MIT license. */
!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('aria-label',o);t[e].removeAttribute('title');}}();