防止数据表隐藏工具提示

Question

我用html和css制作了一个自定义工具提示，如小提琴所示

工具提示本身就是一个span元素：

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

因此，我一直在将全范围元素插入到dataTable中，这是可行的。 但是，不幸的是，在鼠标悬停时，工具提示被其上方的单元格阻挡，如下图所示：

有谁知道如何阻止该工具提示被阻止？ 我尝试增加z-index无效。

另外，我不想使用DataTables内置的工具提示选项，因为每个单元格需要多个不同的工具提示。

编辑：我已经更新了小提琴，以包括数据表和溢出：隐藏

Answer 1

您可以在选择器中使用:not()来应用overflow: hidden; 从隐藏的溢出中排除类。 我为具有工具提示的单元格添加了一个名为.tooltip的类。

您可以手动添加该类，或使用jQuery将其添加到具有.data-tooltip子级的所有单元格中。 演示中包含了两者的示例。

 $('#datatable').DataTable({ paging: false, info: false, dom: 'Bfrtip' }); $('.data-tooltip').each(function() { $(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>