JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent" name="par">
    Parent 1
    <div id="description">
      <div id="left">Text</div>
      <div id="left">Text</div>
    </div>
</div>
<div id="parent" name="par">
    Parent 2
</div>
<div id="parent" name="par">
    Parent 3
    <div id="description">
      <div id="left">Text</div>
      <div id="left">Text</div>
    </div>
</div>

CSS

#parent{
  top:10vw;
  position:relative;
  float:left;
  width:20vw;
  height:20vw;
  background-color:#FF6600;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:2vw;
  margin:2vw;
  font-size:2vw;
}
/*
#description:before {
  content: '';
  position:absolute;
  width:100%;
  height:100%;
  z-index:2;
  left:0vw;
  top:0vw;
  background-color: transparent;
}
*/
#description {
  position:absolute;
  z-index:1;
  padding:2vw;
  margin:2vw;
  width:20vw;
  left:-2vw;
  top:-10vw;
  height:5vw;
  display:none;
  background-color: rgba(4, 6, 46, 0.9);
  cursor:default;
  border-radius:0px;
  font-size:2vw;

}

#description:after {
  content: '';
  position:absolute;
  border-style:solid;
  border-width: 22px 23px 0;
  border-color: rgba(4, 6, 46, 0.9) transparent;
  display:block;
  width:0;
  margin-left:-27px;
  bottom: -22px;
  left:46px;
}
#left {
float:left;
color:#FFFFFF;
margin:5px;
}

JavaScript

function moreinfo() {
var inf = document.getElementsByName("par"); //get parent
for(var i=0; i < inf.length; i++) {
	for (var j=0; j < inf[i].children.length; j++) {
		if (inf[i].children[j].getAttribute('id')=="description") { //check if parent has a child ellement named 'description'
			inf[i].addEventListener("mouseover",function(e) { //add mouseover event to parent
      	for (var a = 0;a < e.target.children.length; a++) {
					if (e.target.children[a].getAttribute('id')=="description") {
						e.target.children[a].style.display="block";
						e.target.children[a].addEventListener("mouseover",function(e){e.target.style.display="block";}, false); 
              
              e.target.children[a].addEventListener("mouseleave",function(e){
                 this.style.display="none";
              }, false);
              
            e.target.children[a].addEventListener("click",function(e){e.cancelBubble=true;}, false); //cancel parent click event on child
          }
         };
        }, true);
      inf[i].addEventListener("mouseout",function(e) { //add mouseout event to parent
      	for (var a = 0;a < e.target.children.length; a++) {
        	if (e.target.children[a].getAttribute('id')=="description") {
          	e.target.children[a].style.display="none";
          }
        };
      }, true);
    }
   }
}
}

window.onload = moreinfo();