JSFiddle - React, Tailwind, and code Playground

by gilly3

HTML

<div class="a">
    AAA
    <div class="b">
        BBB
    </div>
</div>

<a class="tooltip">
    <div class="c">
        CCC
    </div>
    <div class="d">
        DDD
    </div>
</a>

CSS

.a
{
    width: 200px;
    height: 50px;
    border: solid 1px black;
    background-color: #99ccff;
    position: relative;
}
.b
{
    position: absolute;
    left: 100%;
    top: 0;
    height: 40px;
    width: 150px;
    background-color: #ffcc99;
    border: solid 1px black;
    display: none;
}
.a:hover .b
{
    display: block;
}

a.tooltip
{
    position: relative;
    display: inline-block;
    margin-top: 20px;
}
.c
{
    width: 100px;
    height: 100px;
    border: solid 1px black;
    background-color: #cc99ff;
}
.d
{
    position: absolute;
    left: 50px;
    top: 100%;
    height: 25px;
    width: 75px;
    background-color: #99ffcc;
    border: solid 1px black;
    display: none;
}
a:hover .d
{
    display: block;
}