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;
}

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.

user_1307030 · Answer

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;
}

user_3897775 · Answer

One approach to solving this might be to apply to the ::after pseudo-element something like:

transform: translateY(-24px)

to raise the tooltip above the row of squares so that it isn't automatically truncated by the next square in the row.

Working Example:

.main {
 display: flex;
 width: 600px;
 margin-top: 24px;
}

.nephew {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: rgb(0, 0, 127);
}

.nephew.tooltip {
 background-color: rgb(63, 63, 127);
}
 
.nephew::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  white-space: nowrap;
}

.nephew.tooltip:hover::after {
  content: 'This is a very long tooltip';
  transform: translateY(-20px);
}

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

2 Answers