JSFiddle - React, Tailwind, and code Playground

HTML

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

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

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

<div class="info">
Hi
</div>

<div class="info">
Hello
</div>

<div class="info">
Hey
</div>

CSS

.box {
  width:100px; 
  height:100px;
  border-radius: 10px;
}

.red{
  background-color: red;
}

.green{
  background-color: green;
}

.info {
  display: none;
}

JavaScript

var box = document.getElementsByClassName("box");

for (var i = 0; i < box.length; i++) {
  box[i].onmouseover = function(){
    var info = document.getElementsByClassName("info");
    info[i].style.display= "block";
  }
}

for (var i = 0; i < box.length; i++) {
box[i].onmouseout = function(){
  var info = document.getElementsByClassName("info");
  info[i].style.display= "block";
  }
}