JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.container {
    width: 450px;
    height: auto;
}

.box {
    background: #CCC;
    padding: 20px;
    float: left;
    height: 60px;
    width: 60px;
    list-style-type: none;
    margin: 5px;
    z-index: 1;
    position: relative;
}
.tooltip {
    background: rgba(153,153,153,0.7);
    padding: 20px;
    height: 60px;
    width: 170px;
    margin: 5px;
    visibility:hidden;
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
}
.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');
    });
    
    $(".box").mouseleave(function(event) {
        $(this).nextAll(".tooltip:first").css('visibility','hidden');
    });

});