JSFiddle - React, Tailwind, and code Playground

by Evgeniy Lukovsky

HTML

<div class="box">
    <div class="tooltip">
        <div></div>
    </div>
</div>

SCSS

div.box {
    margin-top:100px;
    $tooltipW:100px;
    $tooltipH:30px;
    width:200px;
    height:50px;
    background:green;
    &:hover {
        div.tooltip {
            display: block;
        }
    }
    div.tooltip {
        position: relative;
        display: none;
        margin-left:50%;
        width:5px;
        height:5px;
        div {
            position:absolute;
            margin-left:-$tooltipW/2;
            top: -$tooltipH;
            background:grey;
            width:$tooltipW;
            height:$tooltipH;
        }
    }
}