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

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.

https://stackoverflow.com/questions/66619999/how-do-i-show-an-after-element-above-everything-regardless-of-overflow-and-opa March 14, 2021 at 08:46AM