ngx-datatable内Tooltip被行边框遮挡，调整z-index无效求解决方案

我之前碰到过一模一样的问题，别着急，不是你改z-index的方式不对，而是堆叠上下文在背后限制了Tooltip的层级。

问题原因 #

1. ngx-datatable的.datatable-body-row元素默认设置了overflow: hidden，同时行元素因为position: relative（组件默认样式）创建了自己的堆叠上下文。
2. 你的Tooltip是在行元素内部渲染的，哪怕给.tooltip-inner设置再高的z-index，它也只能在当前行的堆叠上下文里生效，无法突破行元素的层级，所以会被行边框遮挡。

修复方案 #

方案一：让Tooltip脱离行的DOM层级（推荐） #

如果用的是ng-bootstrap的Tooltip组件，只需要给触发Tooltip的元素添加container="body"属性，让Tooltip直接渲染到<body>标签下，彻底脱离表格行的堆叠上下文：

<button type="button" class="btn btn-sm btn-primary"
        ngbTooltip="Edit row" container="body">
  Edit
</button>

这个方案不会影响表格的布局，是最安全的解决方式。

方案二：修改表格行的overflow属性 #

如果不能修改Tooltip的渲染位置，可以尝试放开表格行的溢出限制：

.datatable-body-row {
  overflow: visible !important;
}

注意：这个操作可能导致行内其他内容溢出表格，需要测试是否影响页面布局。

方案三：调整堆叠上下文层级 #

如果上述方案都不适用，可以手动调整Tooltip的z-index，同时取消行元素的堆叠上下文：

/* 提升Tooltip的全局层级 */
.tooltip {
  z-index: 1050 !important; /* 这个值要高于表格行的z-index */
}
/* 取消行元素的堆叠上下文 */
.datatable-body-row {
  z-index: auto !important;
}

内容的提问来源于stack exchange，提问作者Fritz Herbers