Show tooltip over other z-index stacking contexts

I am trying to show a tooltip created into a table field, over the other fields and tables. The problem is that the other table and elements are created into other DIVs that have set the CSS z-index property to 0.

So even if I set the tooltip CSS z-index property to a high value (e.g. 9999), it is always showed behind the other tables (because of the z-index stacking contexts).

I do NOT want to modify the z-index property of the other elements, as I am injecting my elements into a third party created web page.

Also I do NOT want to move the tooltip to an upper level, as when the element where the tooltip is contained will be dynamically removed for the third party, I want the tooltip to be automatically removed also.

Is there any CSS solution for this?

I have this JSFiddle to play with the situation: https://jsfiddle.net/u6q8j4ck/

.content {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  z-index: 0;
}

table {
  position: relative;
  background: #ccc;
}

table td {
  white-space: nowrap;
}

table td span {
  position: relative;
  display: inline-block;
}

.hoverable {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.hoverable img {
  display: inline-block;
  width: 15px;
}

.tooltip {
  position: absolute;
  display: none;
  z-index: 9999;
  padding: 5px;
  background-color: white;
  white-space: nowrap;
  border-style: solid;
  border-width: 1px;
}

.hoverable:hover .tooltip{
  display: block;
}

<html>
<body>
    
    <div class="content">
        
          <table border>
          <tbody>
            <tr>
              <td>
                <span>Hover this:</span>
                <div class="hoverable">
                  <img src="https://img.icons8.com/flat_round/344/info.png">
                  <div class="tooltip">
                    <span>I am on TOP of the tables?</span>
                    <ul>
                      <li>List 1</li>
                      <li>List 2</li>
                    </ul>
                  </div>
                </div>
              </td>
              <td>Table Text</td>
              <td>Table Text</td>
            </tr>
          </tbody>
          </table>
          
          <div>
            <span>Content text</span>
          </div>
          
    </div>
    
    <div class="content">
        
          <table border>
          <tbody>
            <tr>
              <td>
                <span>Hover this:</span>
                <div class="hoverable">
                  <img src="https://img.icons8.com/flat_round/344/info.png">
                  <div class="tooltip">
                    <span>I am on TOP of the tables?</span>
                    <ul>
                      <li>List 1</li>
                      <li>List 2</li>
                    </ul>
                  </div>
                </div>
              </td>
              <td>Table Text</td>
              <td>Table Text</td>
            </tr>
          </tbody>
          </table>
          
          <div>
            <span>Content text</span>
          </div>
          
    </div>
    
    <div class="content">
        
          <table border>
          <tbody>
            <tr>
              <td>
                <span>Hover this:</span>
                <div class="hoverable">
                  <img src="https://img.icons8.com/flat_round/344/info.png">
                  <div class="tooltip">
                    <span>I am on TOP of the tables?</span>
                    <ul>
                      <li>List 1</li>
                      <li>List 2</li>
                    </ul>
                  </div>
                </div>
              </td>
              <td>Table Text</td>
              <td>Table Text</td>
            </tr>
          </tbody>
          </table>
          
          <div>
            <span>Content text</span>
          </div>
          
    </div>

</body>
</html>

Solution

May be I am missing something, but using one of the tricks explained in the answer linked by Temani Afif seems to solvre the problem:

.content {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  z-index: 0;
}

table {
  position: relative;
  background: #ccc;
}

table td {
  white-space: nowrap;
}

table td span {
  position: relative;
  display: inline-block;
}

.hoverable {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  transform-style: preserve-3d;
}

.hoverable img {
  display: inline-block;
  width: 15px;
}

.tooltip {
  position: absolute;
  display: none;
  z-index: 9999;
  padding: 5px;
  background-color: white;
  white-space: nowrap;
  border-style: solid;
  border-width: 1px;
  transform: translateZ(1px);
}

.hoverable:hover .tooltip{
  display: block;
}

<html>
<body>
    
    <div class="content">
        
          <table border>
          <tbody>
            <tr>
              <td>
                <span>Hover this:</span>
                <div class="hoverable">
                  <img src="https://img.icons8.com/flat_round/344/info.png">
                  <div class="tooltip">
                    <span>I am on TOP of the tables?</span>
                    <ul>
                      <li>List 1</li>
                      <li>List 2</li>
                    </ul>
                  </div>
                </div>
              </td>
              <td>Table Text</td>
              <td>Table Text</td>
            </tr>
          </tbody>
          </table>
          
          <div>
            <span>Content text</span>
          </div>
          
    </div>
    
    <div class="content">
        
          <table border>
          <tbody>
            <tr>
              <td>
                <span>Hover this:</span>
                <div class="hoverable">
                  <img src="https://img.icons8.com/flat_round/344/info.png">
                  <div class="tooltip">
                    <span>I am on TOP of the tables?</span>
                    <ul>
                      <li>List 1</li>
                      <li>List 2</li>
                    </ul>
                  </div>
                </div>
              </td>
              <td>Table Text</td>
              <td>Table Text</td>
            </tr>
          </tbody>
          </table>
          
          <div>
            <span>Content text</span>
          </div>
          
    </div>
    
    <div class="content">
        
          <table border>
          <tbody>
            <tr>
              <td>
                <span>Hover this:</span>
                <div class="hoverable">
                  <img src="https://img.icons8.com/flat_round/344/info.png">
                  <div class="tooltip">
                    <span>I am on TOP of the tables?</span>
                    <ul>
                      <li>List 1</li>
                      <li>List 2</li>
                    </ul>
                  </div>
                </div>
              </td>
              <td>Table Text</td>
              <td>Table Text</td>
            </tr>
          </tbody>
          </table>
          
          <div>
            <span>Content text</span>
          </div>
          
    </div>

</body>
</html>