我有一个带有固定标题的表,工具提示被悬停时的相邻单元格隐藏。
https://jsfiddle.net/afp54u98/4/
table {
border-collapse: collapse;
width: 100%;
position: relative;
}
td, th {
height: 200px;
border: 1px solid black;
}
th {
position: sticky;
top: 0;
background: #eee;
}
button:hover::after {
content: "some tooltip content";
position: absolute;
bottom: 50%;
left: 250px;
background-color: yellow;
padding: 10px 8px;
min-width: 240px;
}
您需要降低left
值:
table {
border-collapse: collapse;
width: 100%;
position: relative;
}
td, th {
height: 200px;
border: 1px solid black;
}
th {
position: sticky;
top: 0;
background: #eee;
}
button:hover::after {
content: "some tooltip content";
position: absolute;
bottom: 55%;
left: 25px;
background-color: yellow;
padding: 10px 8px;
min-width: 240px;
}
<table>
<thead>
<tr>
<th>sticky header <button>tooltip</button></th>
<th>sticky header</th>
<th>sticky header</th>
</tr>
</thead>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>