在其他 z-index 堆叠上下文上显示工具提示

Question

我试图在其他字段和 table 上显示在 table 字段中创建的工具提示。问题是其他 table 和元素被创建到其他 DIV 中，这些 DIV 已将 CSS z-index 属性设置为 0.

所以即使我将工具提示 CSS z-index 属性设置为一个高值（例如 9999），它总是显示在其他 table 之后（因为z-index 堆叠上下文）。

我不想修改其他元素的 z-index 属性，因为我正在将我的元素注入到第三方创建的网页中。

我也不想将工具提示移到上层，因为当包含工具提示的元素将为第三方动态删除时，我也希望工具提示也被自动删除。

有什么CSS解决方案吗？

我有这个 JSFiddle 来处理这种情况： 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>

Answer 1

可能是我遗漏了什么，但使用 Temani Afif 链接的答案中解释的技巧之一似乎可以解决问题：

.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>

在其他 z-index 堆叠上下文上显示工具提示

Show tooltip over other z-index stacking contexts

html

css

z-index