工具提示与Font-Awesome和表格

Question

我正在尝试使用"title"属性向表格单元格内的图标添加工具提示。对于位于表格外部的图标，工具提示似乎正常工作，但在表格内部工作不正常。 下面是 js-fiddle 链接： https://jsfiddle.net/amahajan/7vyhzgod/1/

<td><div>D</div>
<div class="lock-posn"><i class="fas fa-eye fa-sm"></i></div>
<div class="mis-match"><a href="#" title ="Warning"><i class="fas fa-exclamation-triangle fa-sm"></i></a></div>
</td>

请告诉我如何处理这个问题。谢谢。

- Anushree Mahajan

Answer 1

由于使用了position:absolute，.lock-posn和.mis-match无法显示标题工具提示，需要更改CSS样式。

table {
    border-collapse: collapse;
    float: left;
    font-size: 12px;
    table-layout: auto;
    overflow-x: scroll;
    overflow-y: scroll;
    position: absolute;
    top: 75px;
}

thead th{
    position: sticky;
    position: -webkit-sticky;
    top: 75px;
    z-index: 3;
    background-color: rgba(255, 255, 255, 1);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-width: thin;
    border-bottom-color: grey;
    background-clip: padding-box;
    white-space: nowrap;
    min-width: 100px;
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    text-align: center;
    overflow-x: hidden;
}

 tbody td {
    border-collapse: collapse;
    border-style: solid;
    border-width: thin;
    border-color: grey;
    white-space: nowrap;
    text-align: center;
    min-width: 100px;
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    overflow-x: scroll;
    z-index: -1;
    overflow-x: hidden;
    position: relative;
}

#opt-staff-table th.opt-staff-sticky-col {
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    top: 75px;
    z-index: 4;
}

.lock-posn {
    width: 48%;
    display: inline-block;
    text-align: right;
}

.mis-match {
    display: inline-block;
    text-align: left;
    width: 48%;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" />

<a href="#" title="Show the previous 4 weeks"><i class="fas fa-chevron-left"></i></a>
<table>
<thead>
<tr>
<th>Day1</th>
<th>Day2</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>D</div>
<div class="mis-match"><a href="#" title ="Warning"><i class="fas fa-exclamation-triangle fa-sm"></i></a></div>
<div class="lock-posn"><i class="fas fa-eye fa-sm"></i></div>
</td>
<td><div>E</div></td>
</tr>

<tr>
<td><div>N</div></td>
<td><div>A</div></td>
</tr>

</tbody>
</table>

- Hiren Vaghasiya

---

谢谢，它工作得很好，但是我无法将图标定位到单元格的角落，而不使用绝对定位。有什么变通方法吗？此外，为什么使用position:absolute会阻止标题显示出来？ - Anushree Mahajan

我尝试了很多方法，但是我没有找到其他的方法来使绝对定位元素相对于其相对元素进行定位，而这个相对元素是TD，所以它对于绝对定位不可见。 - Hiren Vaghasiya

Answer 2

尝试放置这个

<td><div>D</div>
<div class="lock-posn"><i class="fa fa-eye fa-sm"></i></div>
<div class="mis-match"><a href="#" title ="Warning"><i class="fa fa-exclamation-triangle fa-sm"></i></a></div>
</td>

我总是和fa一起使用这个。

- Rajan Mishra