为何表格表头(th)内tooltip超出边框会隐藏？如何解决？

我需要在HTML表格的某个表头(th)内添加自定义tooltip，于是在th里嵌入了tooltip元素，将th设为相对定位，tooltip设为绝对定位使其悬浮在th上方。但tooltip超出th边框后就会消失，尝试设置z-index也没用，请问怎么让tooltip超出边框后仍然可见？

对应的HTML代码：

<table class="table" cellspacing="0">
   <thead>
      <tr class="header-row">
         <th>Rank</th>
         <th>Wallet Address</th>
         <th>Avg. Bananas/Game</th>
         <th>Avg. Distance/Game</th>
         <th>Distance Reached</th>
         <th>World Reached</th>
         <th style="
            z-index: 100;
            position: relative;
            ">
            <div class="multiplier-col">Multiplier <img src="/static/media/info_icon.af5a2d2b.svg" alt="info" class="header-icon"></div>
            <span class="tooltip" style="
               /* z-index: 10; */
               position: absolute;
               ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </span>
         </th>
         <th>$PRIMATE Token Earned</th>
         <div class="table-heading-background"></div>
      </tr>
   </thead>
</table>

• 检查并移除父元素的overflow限制：tooltip消失最常见的原因是th或者它的父元素（比如tr、thead、table）设了overflow: hidden，这会把超出边界的内容直接裁掉。得检查这些元素的CSS，把overflow改成visible（默认就是这个值，只要确保没设成hidden/auto/scroll就行）。

• 调整tooltip的定位层级与位置：

  • 给tooltip设个足够高的z-index（比如z-index: 9999），绝对定位的tooltip已经脱离了th的内容流，只要父元素不裁剪，层级够高就不会被挡。
  • 给tooltip加具体的定位坐标，比如top: 100%; left: 0;让它出现在th下方，或者top: -100%; left: 0;放在上方，既避免和th内容重叠，也能确保不会被其他元素遮住。

• 优化后的CSS示例：可以把内联样式换成外部CSS，更易维护：

/* 确保th和父元素不裁剪溢出内容 */
.table thead tr th {
  position: relative;
  overflow: visible; /* 关键：允许内容超出th边界 */
}

/* tooltip基础样式 */
.tooltip {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 5px); /* 和th底部保持5px间距 */
  left: 0;
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  width: 300px;
  display: none; /* 默认隐藏，hover时显示 */
}

/* 鼠标悬停信息图标时显示tooltip */
.multiplier-col:hover + .tooltip {
  display: block;
}

• 注意表格布局的特殊性：如果表格用了table-layout: fixed固定列宽，只要保证th的overflow是visible，tooltip照样能正常显示。

内容的提问来源于stack exchange，提问作者samman adhikari