JSFiddle - React, Tailwind, and code Playground

by bitstarr

HTML

<script src="http://www.appelsiini.net/download/jquery.viewport.js"></script>
<div class="js-has-tooltip boobs has-tooltip top" data-tooltip="top - the bigger the better">
    boobs    
</div>

<div class="js-has-tooltip boobs has-tooltip bottom" data-tooltip="bottom - the bigger the better">
    boobs    
</div>

<div class="js-has-tooltip boobs has-tooltip left" data-tooltip="left- the bigger the better">
    boobs    
</div>

<div class="js-has-tooltip boobs has-tooltip right" data-tooltip="right - the bigger the better">
    boobs    
</div>

CSS

body {
    padding: 5em;
    background: #aaa;
}

.boobs {
    background: #eee;
    border-radius: 10em;
    padding: 2em 1.5em;
    display: inline-block;
    margin: 1em;
}

.has-tooltip {
    position: relative;
}

.has-tooltip:before {
    -webkit-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
    opacity: 0;
    transform: scale(0);

    position: absolute;
    content: attr(data-tooltip);
    min-width: 10em;
    max-width: 20em;
    background: #999;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 0.5em;
    text-align: center;
}

.has-tooltip:hover:before {
    transform: scale(1);
    opacity: 1;
}

.has-tooltip.top:before
{
    bottom: 110%;
    left: -50%;
}

.has-tooltip.bottom:before
{
    top: 110%;
    left: -50%;
}

.has-tooltip.left:before
{
    top: 50%;
    right: 110%;
    margin-top:-1em;
}

.has-tooltip.right:before
{
    top: 50%;
    left: 110%;
    margin-top:-1em;
}