title: z-index does not apply on a custom nested tooltip
body: <p>Here is my tooltip:</p>
  
  <pre><code>  .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;
    }
  </code></pre>
  
  <p>And here is the parent block</p>
  
  <pre><code>.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;
    }
  </code></pre>
  
  <p>The problem is when I hover over a <code>Block A</code> the tooltip is being hidden under a <code>Block B</code> even though its z-index value is higher.</p>
  
  <p><a href="https://jsfiddle.net/y6udf6f8/1/" rel="nofollow noreferrer">DEMO</a></p>
  
  <p>What am I doing wrong and how can I fix it?</p>