JSFiddle - React, Tailwind, and code Playground

by Jake Cattrall

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul class="mainNav">
<li>
<a href="" title="Test">
    <i class="fa fa-tachometer dashboard"></i>
</a>
</li>
<li>
<a href="" title="Test">
<i class="fa fa-plane radar"></i>
</a>
</li>
<li>
<a href="" title="Test">
<i class="fa fa-lightbulb-o support"></i>
</a>
</li>
<li>
<a href="" title="Test">
<i class="fa fa-users community"></i>
</a>
</li>
</ul>

CSS

.mainNav a{
    position: relative;
}
.mainNav a:before{
    display: none;
    width: 100px;
    content: attr(title);
    padding: 5px 10px;
    background-color: black;
    color: white;
    position: absolute;
    right: -150px;
    top: 0;
}
.mainNav a:hover:before{
    display: block;
}