带有超赞字体和表格的工具提示

Question

我正在尝试使用title属性将工具提示添加到表格单元内的图标。工具提示在表格外似乎可以正常工作，但在表格内无法正常工作。 以下是js小提琴： 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>

请让我知道我该如何处理。

谢谢

Answer 1

由于position：absolute，更改.lock-posn和.mis-match的css，未显示title tooltip

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>

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一起使用。