jstensen jstensen - 1 year ago 143
AngularJS Question

Angular-ui's tooltip does not display correctly in 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.

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

Best regards.

Answer Source

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'

And the css:

.cellToolTip {
    overflow: visible;

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

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;

Here is a new plunker that is working.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download