如何将Tooltip弹窗整合到订单表格的表头单元格中？

1. 将Tooltip组件嵌入目标表头单元格 #

你只需要把独立的Tooltip代码直接放到需要添加说明的表头单元格内部即可，比如你要给「TRV Aperature」这列加提示，修改对应的<th>标签内容：

<div>
 <table id="lst-table">
  <thead>
    <tr>
     <th class="lst-th" scope="col">Model <br>Ref.</th>
     <th class="lst-th" scope="col">Perf <br>Type</th>
     <th class="lst-th" scope="col">LST Cover <br>Length</th>
     <th class="lst-th" scope="col">LST Cover <br>Colour</th>
     <th class="lst-th" scope="col">Mounting <br>Type</th>
     <th class="lst-th" scope="col">
       TRV <br>Aperature
       <!-- 把Tooltip组件放到表头内部 -->
       <div class="tooltip-lst">ⓘ
         <span class="tooltiptext">Is an aperature required to accommodate a Thermostatic Radiator Valve (TRV). TRV supplied by others.</span>
       </div>
     </th>
     <th class="lst-th" scope="col">Healthcare</th>
     <th class="lst-th" scope="col">Sloped <br>Top</th>
     <th class="lst-th" scope="col">Quantity</th>
     <th class="lst-th" scope="col">Order <br>Code</th>
    </tr>
  </thead>
 </table>
</div>

2. 优化Tooltip的显示效果（可选但实用） #

默认的Tooltip定位可能会和表头内容重叠，调整CSS让它显示更合理，还能加过渡动画提升体验：

.lst-table{
text-align: right;
position: relative;
border-collapse: collapse;
background-color: #7F7753;
}
.lst-td, th {
border: 1px solid #999;
padding: 10px;
}
.lst-th {
background: #7F7753;
color: white;
border-radius: 0;
position: sticky;
top: 0;
padding: 10px;
/* 给表头加相对定位，避免Tooltip溢出后错位 */
position: relative;
}
.lst-input-ral-box {
border: 1px solid #d7d6d6;
display: flex;
gap: 0;
width:85px;
}
.lst-input-ral-box:focus-within {
border: 0px solid #000;
}
input {
border: none;
outline: none;
}
.tooltip-lst {
position: relative;
display: inline-block;
/* 让信息图标和表头文字对齐 */
vertical-align: middle;
margin-left: 4px;
}
.tooltip-lst .tooltiptext {
    visibility: hidden;
    width: 220px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 8px 10px;
    /* 定位到图标下方居中，避免遮挡表头 */
    position: absolute;
    z-index: 100;
    bottom: 120%;
    left: 50%;
    margin-left: -110px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
  
.tooltip-lst:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* 给Tooltip加个小箭头，明确关联关系 */
.tooltip-lst .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

这样调整后，鼠标悬浮在表头的「ⓘ」图标上时，Tooltip会平滑显示在图标下方，不会遮挡表头内容，体验更流畅。

内容的提问来源于stack exchange，提问作者alistair.oakes