bootstrap 工具提示显示在 ui-grid 后面 header

Question

所以我有一个 bootstrap 显示所有单元格的工具提示，但我遇到的问题是工具提示隐藏在网格后面 header。下面是我的显示工具提示的行模板。

rowTemplate: "<div uib-tooltip='{{row.entity[col.colDef.name]}}' tooltip-placement='bottom' tooltip-animation='true' " +
        "ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" " +
        "class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader, different:!row.entity.isSame }\" ui-grid-cell></div>"

我玩过 z-index css 属性 但仍然没有帮助，我在这里做错了什么

.tooltip {
    position: absolute;
    z-index: 10;
}
.ui-grid-header{
    position: relative;
    z-index: 2;
}

Answer 1

尝试添加此选项以将工具提示附加到主体而不是父元素：

tooltip-append-to-body='true'

希望对您有所帮助，谢谢。