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

I've been searching for some time for a solution for displaying a tooltip on ng-grid but with no luck. When I use the cellTemplate on ng-grid for customizing the cell to include a tooltip I have experienced various problems - the tooltip is either not showing up or behaving strangely as shown in a plunker: http://plnkr.co/edit/MFhwgOvSUFKcyJPse5wf.

我一直在寻找一些解决方案，用于在ng-grid上显示工具提示，但没有运气。当我在ng-grid上使用cellTemplate来自定义单元格以包含工具提示时，我遇到了各种各样的问题 - 工具提示要么没有显示出来，要么表现得很奇怪，如图所示：http：//plnkr.co/edit/MFhwgOvSUFKcyJPse5wf 。

Have I missed something? Does anyone have a solution for displaying tooltips nicely in ng-grid?

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

Best regards.

最好的祝福。

2 个解决方案

#1

As I commented, this is a known issue inside an ng-grid cell. I fixed this by setting cellClass in the column definition to this:

正如我评论的那样，这是ng-grid单元中的一个已知问题。我通过在列定义中将cellClass设置为：

cellClass: 'cellToolTip'

And the css:

和CSS：

.cellToolTip {
    overflow: visible;
}

Here is a plunker that shows the tooltip. However, the tooltip is not positioned exactly right. :)

这是一个显示工具提示的plunker。但是，工具提示的位置并不完全正确。 :)

EDIT: Adding this to the .tooltip style fixed the positioning problem, but I'm not sure why in Plunker I had to do this. In my own code, this was not necessary:

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

.tooltip {
  top: 0 !important;
}

Here is a new plunker that is working.

这是一个正在运作的新型吸油烟机。

#2

You can use

您可以使用

tooltip-append-to-body="true"

as documented here (scroll down to tooltip): http://angular-ui.github.io/bootstrap/

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

Here is the plunker: http://plnkr.co/edit/nHN2p8qMjT7ZTwpXgJoO?p=preview

以下是plunker：http：//plnkr.co/edit/nHN2p8qMjT7ZTwpXgJoO？p =preview

#1