How do I show an ::after element above everything regardless of overflow and opacities of filters of siblings and nephews

Question

So I have an element that I want to show a tooltip for. But of course, to show this tooltip, I need to make it go above everyhing, no matter what (including overflow: hidden parents). Right now I'm making this happen with the :hover::after rule, but the element's been hidden beneath siblings with a backdrop-filter: blur(...) style.

Minimal reproducable example:

.nephew {
  backdrop-filter: blur(10px);
  background-color: #0005;
  width: 100px;
  height: 100px;
}
.nephew.tooltip {
  position: relative;
 }
.tooltip:hover::after {
  content: 'This is a very long tooltip';
  background-color: white;
  z-index: 999999999;
  position: absolute;
  width: max-content;
}
.main {
  display: flex;
}

<div class="main">
  <div class="nephew"></div>
  <div class="nephew tooltip"></div>
  <div class="nephew"></div>
</div>

Please tell me how to fix this problem. I'm also open to new solutions, since I'm aware this is a bodgy way of implementing this feature.

Answer 1

You need to bring the container div forward too and not just the pseudo element.

Include this CSS and it should now work fine:

.nephew:hover {
    z-index: 99999999;
}

Updated example:

.nephew {
  backdrop-filter: blur(10px);
  background-color: #0005;
  width: 100px;
  height: 100px;
}
.nephew:hover {
    z-index: 99999999;
    background-color: #0004; /* just added this to highlight the container */
}
.nephew.tooltip {
  position: relative;
 }
.tooltip:hover::after {
  content: 'This is a very long tooltip';
  background-color: white;
  z-index: 999999999;
  position: absolute;
  width: max-content;
}
.main {
  display: flex;
}

<div class="main">
  <div class="nephew"></div>
  <div class="nephew tooltip"></div>
  <div class="nephew"></div>
</div>