JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div id="one" onmouseover="showDialogBox('two','triangleone','dialogboxone')" onmouseout=hideDialogBox('two','triangleone','dialogboxone')></div>

    <div id="dialogboxone">
        <div id="two"></div>
        <div id="triangleone"></div>
    </div>
</div>

<div class="wrapper">
    <div id="three" onmouseover="showDialogBox('four','triangletwo','dialogboxtwo')" onmouseout="hideDialogBox('four','triangletwo','dialogboxtwo')"></div>

    <div id="dialogboxtwo">
        <div id="four"></div>
        <div id="triangletwo"></div>
    </div>
</div>

CSS

div.wrapper { position: relative; width:300px; height:300px; border:1px solid #000000; float:left; margin-left:10px; }

#one, #three { position:relative; width: 100%; height: 100%; }
#two, #four { margin:0; padding:0; left:334px; top:100px; background-color:#3B3B3B; border:none; width:200px; height:100px; display:none; position:relative; left:14px; }

#triangleone, #triangletwo { margin:0; padding:0; width: 0; height: 0; border-color:transparent; border-top: 8px solid transparent; border-right: 14px solid #3B3B3B; border-bottom: 8px solid transparent; top:35px; display:none; position:relative; }

#dialogboxone, #dialogboxtwo { position: absolute; left: 100%; top: 0; margin:0; padding:0; width:214px; display:none; border:none; }

JavaScript

var timer;
function showDialogBox(idOne,idTwo,idThree){
    var firstSideBar = document.getElementById(idOne);
    var secondSideBar = document.getElementById(idTwo);
    var dialogBox = document.getElementById(idThree);
    
    timer=setTimeout(function() {
        firstSideBar.style.display = "block";
        secondSideBar.style.display = "block";
        dialogBox.style.display = "block";
    }, 800);
}

function hideDialogBox(idOne,idTwo,idThree) {
    clearTimeout(timer);
    var firstSideBar = document.getElementById(idOne);
    var secondSideBar = document.getElementById(idTwo);
    var dialogBox = document.getElementById(idThree);
    firstSideBar.style.display = "none";
    secondSideBar.style.display = "none";
    dialogBox.style.display = "none";
}