javascript – 带有Font-Awesome和表格的工具提示

我正在尝试使用title属性将一个工具提示添加到table-cell内的图标.工具提示似乎在图表外面工作正常,但在表格内部却无法正常工作.
以下是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>

请让我知道如何处理这个问题.

谢谢

解决方法:

更改.lock-posn和.mis-match的css,由于position：absolute,它没有显示标题工具提示

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>

标签：javascript,font-awesome,html
来源： https://codeday.me/bug/20190705/1387259.html