Подсказка с Font-Awesome и столом - PullRequest
Новая
       6

Подсказка с Font-Awesome и столом

0 голосов
/ 21 января 2019

Я пытаюсь добавить подсказку к значку внутри ячейки таблицы, используя атрибут 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>

Пожалуйста, дайте мне знать, как мне справиться с этим.

Спасибо

Ответы [ 2 ]

0 голосов
/ 21 января 2019

Изменение css на .lock-posn и .mis-match, из-за позиции: абсолютная, не отображается 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>
0 голосов
/ 21 января 2019

попробуйте поставить это 

<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.

...