抱歉提前，因为我是新的编码更复杂的网站功能。
我试图添加一个工具提示弹出的标题单元格之一，以提供更多的信息给用户。
可以说，我有所需的组件，只是在集成/合并现有表代码与工具提示功能时遇到了问题。
HTML：
<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</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>
<br><br><div class="tooltip-lst">ⓘ
<span class="tooltiptext">Is an aperature required to accommodate a Thermostatic Radiator Valve (TRV). TRV supplied by others.</span></div>CSS（工具提示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;
}
.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;
}
.tooltip-lst .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip-lst:hover .tooltiptext {
visibility: visible;
}任何关于这方面的帮助将不胜感激。
1条答案
按热度按时间abithluo1#
您可以将弹出窗口放在相关的th中（我假设这里是带有文本TRV的那个）。
但是，您还需要确保当它显示时，它在相邻的ths前面，否则它的一部分将被覆盖。
这段代码设置了第个元素在悬停时的z索引。