jquery - 防止 DataTables 隐藏工具提示

Question

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

工具提示本身都是一个 span 元素:

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

所以我一直在将完整的跨度元素插入到我的数据表中，这是有效的。但是，不幸的是，在鼠标悬停时，工具提示被其上方的单元格阻挡，如下图所示:

有没有人知道如何阻止该工具提示被阻止？我试过增加 z-index 无济于事。

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

编辑:我更新了 fiddle 以包含 DataTables 和 overflow:hidden

Answer 1

您可以在应用overflow: hidden; 的选择器中使用: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>