Angular-ui's tooltip does not display correctly in ng-grid

Question

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 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:

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.

Answer 2

You can use

tooltip-append-to-body="true" 

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

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