JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="boxwrapper">
        <div id="box1" class="box">Box 1</div>
        <div id="tooltip1" class="tooltip expandright">Description 1</div>
        <div class="clearfix"></div>
    </div>
    <div class="boxwrapper">
        <div id="box2" class="box">Box 2</div>
        <div id="tooltip2" class="tooltip expandright">Description 2</div>
        <div class="clearfix"></div>
    </div>
    <div class="boxwrapper">
        <div id="box3" class="box">Box 3</div>
        <div id="tooltip3" class="tooltip expandleft">Description 3</div>
        <div class="clearfix"></div>
    </div>
    <div class="boxwrapper">
        <div id="box4" class="box">Box 4</div>
        <div id="tooltip4" class="tooltip expandleft">Description 4</div>
        <div class="clearfix"></div>
    </div>
    <div class="boxwrapper">
        <div id="box5" class="box">Box 5</div>
        <div id="tooltip5" class="tooltip expandright">Description 5</div>
        <div class="clearfix"></div>
    </div>
    <div class="boxwrapper">
        <div id="box6" class="box">Box 6</div>
        <div id="tooltip6" class="tooltip expandright">Description 6</div>
        <div class="clearfix"></div>
    </div>
    <div class="boxwrapper">
        <div id="box7" class="box">Box 7</div>
        <div id="tooltip7" class="tooltip expandleft">Description 7</div>
        <div class="clearfix"></div>
    </div>
    <div class="boxwrapper">
        <div id="box8" class="box">Box 8</div>
        <div id="tooltip8" class="tooltip expandleft">Description 8</div>
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>

CSS

.container {
    width: 450px;
    height: auto;
}
.boxwrapper {
    position: relative;
    float: left;
}
.box {
    background: #CCC;
    padding: 20px;
    height: 60px;
    width: 60px;
    list-style-type: none;
    margin: 5px;
    z-index: 0;
}
.tooltip {
    background: rgba(153,153,153,0.7);
    xbackground: red;
    padding: 20px;
    height: 60px;
    width: 170px;
    margin: 5px;
    visibility: hidden;
    position: absolute;
    top: 0px;
    pointer-events: none;
    z-index: 1;
}
.expandleft {
    right: 0px;
}
.expandright {
    left: 0px;
}
.clearfix {
    clear: both;
    float: left;
    height: 1px;
    width: auto;
}
.grid {
    margin: 0px;
    padding: 5px;
}

JavaScript

$(document).ready(function() {

    $(".box").hover(function() {
        $(this).nextAll(".tooltip:first").css('visibility','visible');
        return false;
    }, function() {
        $(this).nextAll(".tooltip:first").css('visibility','hidden');
        return false;
    });
    
});