z-index does not apply on a custom nested tooltip - html

Question

Here is my tooltip:
.tooltip-content{
visibility: hidden;
min-width: 180px;
background-color: rgba(38, 38, 38, 0.9);
color: #fff;
text-align: center;
border-radius: 4px;
padding: 5px 3px;
position: absolute;
font-size: 0.8em;
z-index: 5;
top: 120%;
left: 50%;
transform: translateX(-50%);
}
.tooltip-content::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
z-index: 5;
border-style: solid;
border-color: transparent transparent rgba(38, 38, 38, 0.9) transparent;
}
.btn-tag:hover .tooltip-content {
visibility: visible;
z-index: 5;
}
And here is the parent block
.btn-tag {
position: relative;
border: 1px solid #333;
border-radius: 4px 4px 4px 4px;
color: #333;
font-weight: 500;
padding: 0.7em 0.4em;
font-size: 1em;
text-align: center;
width: 100px;
z-index: 1;
cursor: pointer;
background: red;
}
The problem is when I hover over a Block A the tooltip is being hidden under a Block B even though its z-index value is higher.
DEMO
What am I doing wrong and how can I fix it?

Answer 1

Each z-index declaration establishes a local stacking context. So by specifying z-index: 1 on the .btn-tag, you're establishing a local context for each button for the descendant z-index (the tooltip has a higher z-index "inside" the context of the parent, the first btn-tag, but then the second btn-tag has another context with the same z-index value and since it's after on the DOM it appears on top).
If you were to remove the z-index rule on the .btn-tagclass leaving it by default, then it will behave as you require it.
Please find the demo: https://jsfiddle.net/y6udf6f8/