Angular-ui 的工具提示在 ng-grid 中无法正确显示

Question

我一直在寻找在 ng-grid 上显示工具提示的解决方案，但没有成功。当我在 ng-grid 上使用 cellTemplate 来自定义单元格以包含工具提示时，我遇到了各种问题 - 工具提示要么没有显示，要么行为异常，如 plunker 所示：http://plnkr.co/edit/MFhwgOvSUFKcyJPse5wf。

我错过了什么吗？有人有在 ng-grid 中很好地显示工具提示的解决方案吗？

最好的问候。

Answer 1

你可以使用

tooltip-append-to-body="true" 

如此处所述（向下滚动到工具提示）： http://angular-ui.github.io/bootstrap/

这里是plunker： http://plnkr.co/edit/nHN2p8qMjT7ZTwpXgJoO?p=preview

Answer 2

正如我所评论的，这是一个 ng-grid 单元格内的known issue。我通过在列定义中设置 cellClass 来解决这个问题：

cellClass: 'cellToolTip'

还有css：

.cellToolTip {
    overflow: visible;
}

Here is a plunker 显示工具提示。但是，工具提示的位置并不完全正确。 :)

编辑： 将此添加到.tooltip 样式中修复了定位问题，但我不确定为什么在 Plunker 中我必须这样做。在我自己的代码中，这不是必需的：

.tooltip {
  top: 0 !important;
}

这是一个正在工作的new plunker。