Angular-ui 的工具提示无法在 ng-grid 中正确显示 [英] Angular-ui's tooltip does not display correctly in ng-grid

问题描述

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

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 中很好地显示工具提示的解决方案?

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

最好的问候.

推荐答案

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

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:

cellClass: 'cellToolTip'

和CSS:

.cellToolTip {
    overflow: visible;
}

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

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

编辑:将此添加到 .tooltip 样式修复了定位问题，但我不确定为什么在 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 {
  top: 0 !important;
}

这是一个正在运行的新plunker.

这篇关于Angular-ui 的工具提示无法在 ng-grid 中正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！