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; }
.tile:hover, over:hover {border: 1px solid black;}
.over { width: 100px; height: 100px; position: absolute;}
.stack, #sandwich { width: 400px; height: 400px; position: absolute; }
#tile1 {top: 50px; left: 50px; background: green;}
#tile2 {top: 75px; left: 10px; background: blue;}
#tile3 {top: 150px; left: 310px; background: red;}
#tile4 {top: 250px; left: 250px; background: orange;}
#tile5 {top: 150px; left: 150px; background: purple;}
#over1 {top: 55px; left: 55px; border: 1px solid #000;}
#over2 {top: 80px; left: 15px; border: 1px solid #000;}
#over3 {top: 155px; left: 315px; border: 1px solid #000;}
#over4 {top: 255px; left: 255px; border: 1px solid #000;}
#over5 {top: 155px; left: 155px; border: 1px solid #000;}

JavaScript

$(function() {
    
    $("#top").click(function(e) {
        console.log("Top clicked. Replicating event on bottom layer.");
        
        var bottomEvent = new $.Event("click");
        
        bottomEvent.pageX = e.pageX;
        bottomEvent.pageY = e.pageY;
        
        $("#bottom").trigger(bottomEvent);
        
        return false;
    });    
    
    $("#bottom").click(function() {
        console.log("Bottom clicked.");
    });
});