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.

Selfdetermination

This is a known issue: github.com/angular-ui/ng-grid/issues/317 – Hauberk

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.

Hauberk

Thanks - however the positioning is important, do you have any suggestion on how to position the tooltip right? – Selfdetermination

It will have to do with your template. I'll take a look. – Hauberk

Interesting issue with your solution. {name: "Tiancum Has a lot of information in it, so it goes off the side of the chart and creates a horizontal scroll", age: 43}, – Granoff

Both above plunkers are not working now.Can you fix it ? – Doublereed

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

Birthmark

This worked for me and the accepted answer didn't. Using angular 1.2.2, angular-ui 0.4, ng-grid 2.0.7. – Megawatt

This appears to have been fixed in more recent version and the correct way to do this is this answer. – Allfired

Fixed. ng-grid source code was moved. The plunkers aren't working in their own documentation right now for the same reason. – Birthmark