JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<a href="#" title="Upload" class="icon upload-icon">Upload</a>

CSS

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
    -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  -o-transition:      all 0.2s ease;
}
body{
    padding: 50px;
    font-family: Arial;
    font-size: 90%;
}
.icon{
    display: inline-block;
    width: 30px;
    height: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.upload-icon{
    background: #d64700;
}
.tooltip{
    opacity: 0;
    display: inline-block;
    position: absolute;
    background: #3a3a3a;
    padding: 10px;
    font-weight: bold;
    font-size: 80%;
    color: white;
    margin-left: -45px;
    margin-top: 40px;
}
.tooltip.open{
    opacity: 1;
}
.tooltip:before{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #3a3a3a;
    position: absolute;
    margin-left: 14px;
    margin-top: -15px;
}

JavaScript

$(document).ready(function() {
    $('.icon').each(function() {
        var $icon = $(this);
        var $tooltip = $('<span class="tooltip">' + $icon.attr("title") + '</span>');
        $icon.removeAttr("title")
        $icon.after($tooltip);

        $icon.mouseover(function() {
            $tooltip.addClass("open");
        });
        $icon.mouseout(function() {
            $tooltip.removeClass("open");
        });
    });
});