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:

```css
.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;
}
```

```html
<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.