JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li><a title="" href=""></a>
        <ul><li>tooltip</li></ul>
    </li>
    <li><a title="" href=""></a>
        <ul><li>tooltip</li></ul>
    </li>
    <li><a title="" href=""></a>
        <ul><li>tooltip</li></ul>
    </li>
    <li><a title="" href=""></a>
        <ul><li>tooltip</li></ul>
    </li>
</ul>

SCSS

$lblue: #2c99ce;
$lgrey: #848484;
$white: #fff;
 ul.nav {
    position: relative;
    left: 50px;
    top: 50px;
    li {
        display: inline-block;
        list-style: none outside none;
        position: relative;
        background: $lgrey;
        a {
            height: 30px; 
            width: 30px;
            display: block;
            background: $white;
            position: relative;
            background: transparent;
            z-index: 999;
        }
        ul {
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            li {
                display: none;
                position: absolute; 
                z-index: 999;
                padding: 5px;
                opacity: 1;
                font-size: 11px;
                color: $white;
                background-color: $lblue;  
                text-align: center;  
                width: 75px;
                left: -26px;
                bottom: -35px;
                a {
                    color: $white;
                    background-color: $lblue;  
                    width: auto;
                    height: auto;
                }
            }
            li:before {
                content: "";
                height: 0;
                left: 43px;
                margin-left: -5px;
                position: absolute;
                top: -5px;
                width: 0;
                z-index: 1000;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-bottom: 5px solid $lblue;
            }
        }
        &:hover ul li {
            display: block; 
            position: absolute;
        }
    }
}