JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sandwich">
    <div class="stack" id="bottom">
        <div class="tile" id="tile1">1</div>
        <div class="tile" id="tile2">2</div>
        <div class="tile" id="tile3">3</div>
        <div class="tile" id="tile4">4</div>
        <div class="tile" id="tile5">5</div>
    </div>
    <div class="stack" id="top">
        <div class="over" id="over1">Tooltip for 1</div>
        <div class="over" id="over2">Tooltip for 2</div>
        <div class="over" id="over3">Tooltip for 3</div>
        <div class="over" id="over4">Tooltip for 4</div>
        <div class="over" id="over5">Tooltip for 5</div>
    </div>
</div>
<div id="log">
</div>

CSS

.tile { width: 100px; height: 100px; position: absolute; border: 1px solid black; }
        .tile:hover, over:hover {border: 1px solid black;}
        .over { width: 100px; height: 100px; background-color: #c3c; position: absolute; display:block;}
        .stack, #sandwich { width: 400px; height: 400px; position: absolute; }
        #tile1 {top: 50px; left: 50px;}
        #tile2 {top: 75px; left: 10px;}
        #tile3 {top: 150px; left: 310px;}
        #tile4 {top: 250px; left: 250px;}
        #tile5 {top: 150px; left: 150px;}
        #over1 {top: 55px; left: 55px;}
        #over2 {top: 80px; left: 15px;}
        #over3 {top: 155px; left: 315px;}
        #over4 {top: 255px; left: 255px;}
        #over5 {top: 155px; left: 155px;}

JavaScript

$(document).ready(function(){
    var tileData = new Array();
    
    $('div.tile').each(function(){
        var tileInfo = {};   
        tileInfo.id = this.id;
        tileInfo.text = $(this).text();
        tileInfo.width = $(this).outerWidth();
        tileInfo.height = $(this).outerHeight();
        tileInfo.position = $(this).position();
        tileInfo.coords = {};
        tileInfo.coords.top = tileInfo.position.top;
        tileInfo.coords.right = tileInfo.position.left + tileInfo.width;
        tileInfo.coords.bottom = tileInfo.position.top + tileInfo.height;
        tileInfo.coords.left = tileInfo.position.left;
        
        tileData.push(tileInfo);
    });
    
    $('div.tile').click(function(){
        $('#log').html(this.id + " clicked");
        return false;
    })       
        
    $('div#top').click(function(event){
        $('#log').html('Top clicked');
        
        for(i=0; i<tileData.length;i++){
            if(
                event.pageX >= tileData[i].coords.left &&
                event.pageX <= tileData[i].coords.right &&
                event.pageY >= tileData[i].coords.top &&
                event.pageY <= tileData[i].coords.bottom
            )  {
                $('#' + tileData[i].id).click();
            }
        }  
        
        return false;
    });
});