0

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:

Tooltip backdrop issue

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;
   }
Martin Ledermann
  • 37
  • 6

1 Answers1

1

This answer may help.

Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?

I'd suggest removing the backdrop-filter from div.title, and add it to a pseudo-element instead.

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

div.tile:before {
  content: '';
  backdrop-filter: blur(4px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
EverythingAndNothingDev
  • 61
  • 4