防止數據表的隱藏工具提示

Question

我已經和HTML和CSS自定義提示，在這個fiddle

顯示工具提示本身都是一個span元素：

<span class="data-tooltip tooltip-top error1">Custom tooltip.</span> 

所以我一直插入將完整的span元素放到我的dataTable中，這是工作的。但不幸的是，鼠標懸停時，工具提示被上面的單元格擋住，就像在此圖像中：

有沒有人有任何想法如何阻止該工具提示被阻止？我試過增加z-index無濟於事。

此外，我不想使用DataTables內置工具提示選項，因爲我需要多個不同的工具提示每個單元格。

編輯：我已經更新了小提琴，包括數據表和溢出：隱藏

Answer 1

您可以在選擇適用overflow: hidden;從隱藏溢出排除類使用:not()。我爲具有工具提示的單元添加了一個名爲.tooltip的類。

您可以手動添加該類，也可以使用jQuery將其添加到具有.data-tooltip子級的所​​有單元中。包含在演示中的兩個例子。

$('#datatable').DataTable({ 
 
    paging: false, 
 
    info: false, 
 
    dom: 'Bfrtip' 
 
}); 
 

 
$('.data-tooltip').each(function() { 
 
\t $(this).closest('td').addClass('tooltip'); 
 
})

.data-tooltip { 
 
    display: inline-block; 
 
    position: relative; 
 
    cursor: help; 
 
    padding: 4px; 
 
} 
 

 

 
/* Tooltip styling */ 
 

 
.data-tooltip::before { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #555; 
 
    color: #fff; 
 
    padding: 5px 0; 
 
    font-size: 14px; 
 
    line-height: 1.4; 
 
    min-width: 120px; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    z-index: 1; 
 
    transition: opacity .6s; 
 
} 
 

 
.error1::before { 
 
    content: "Hello"; 
 
} 
 

 

 
/* Dynamic horizontal centering */ 
 

 
.tooltip-top::before { 
 
    left: 50%; 
 
    -ms-transform: translateX(-50%); 
 
    -moz-transform: translateX(-50%); 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
} 
 

 
.tooltip-top::before { 
 
    bottom: 100%; 
 
    margin-bottom: 6px; 
 
} 
 

 

 
/* Tooltip arrow styling/placement */ 
 

 
.tooltip-top::after { 
 
    content: ''; 
 
    display: none; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    border-color: transparent; 
 
    border-style: solid; 
 
} 
 

 

 
/* Dynamic horizontal centering for the tooltip */ 
 

 
.tooltip-top::after { 
 
    left: 50%; 
 
    margin-left: -6px; 
 
} 
 

 
.tooltip-top::after { 
 
    bottom: 100%; 
 
    border-width: 7px 6px 0; 
 
    border-top-color: #555; 
 
} 
 

 

 
/* Show the tooltip when hovering */ 
 

 
.data-tooltip:hover:before, 
 
.data-tooltip:hover:after { 
 
    display: block; 
 
    z-index: 50; 
 
} 
 

 
table tbody td { 
 
    padding-bottom: 0px !important; 
 
} 
 

 
table tbody td:not(.tooltip) { 
 
    overflow: hidden 
 
} 
 

 
body { 
 
    margin: 60px 130px; 
 
} 
 

 

 
/* Demo purposes - ignore this margin */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
<script src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 

 
<table id="datatable" class="table table-bordered cw-table-list"> 
 
    <thead> 
 
    <tr> 
 
     <th>Col1</th> 
 
     <th>Col2</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Row Number1</td> 
 
     <td>1,2,<span class="data-tooltip tooltip-top error1">3</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Row Number 2</td> 
 
     <td class="tooltip">1,2,<span class="data-tooltip tooltip-top error1">3</span></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<span class="data-tooltip tooltip-top error1">Custom tooltip.</span>