防止数据表的隐藏工具提示

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>