I want to add the blur effect to the background image behind my tiles and that aspect works just fine but for some reason it also makes my tooltips being also blurred behind the divs:

How can I make my tooltips stay on top of the subsequent divs when I use the backdrop filter within my div.tile class? Without the backdrop filter everything works just fine but there surely must be some way to achieve the end result I'm looking for without compromising with my tooltips, right?

Playing around with z-index unfortunately hasn't yielded any results yet. :(

Thanks in advance for any tips here!

Here's the sample code of mine: Code Snippet

TLDR:

   div.tile {
       width: 400px;
       height: auto;
       display: inline-block;
       background: RGBA(24, 24, 19, 0.8);
       padding-bottom: 30px;
       backdrop-filter: blur(4px);
   }

.tooltip .tooltiptext-right {
       visibility: hidden;
       width: 300px;
       height: auto;
       display: inline-block;
       background-color: rgba(24, 24, 19, 0.9);
       color: #f9f3c5;
       text-align: justify;
       padding: 20px 30px;
       line-height: 24px;
       font-size: 17px;
   
       /* Position the tooltip */
       position: absolute;
       z-index: 2;
       margin-top: 0px;
       margin-left: 0px;
   }