bootstrap tooltip is displaying behind ui-grid header

Question

so i have a bootstrap tooltip shows for all cells, but i am having issue that tooltip is hidden behind the grid header. below is my rowtemplate which displays the tooltip.

rowTemplate: "<div uib-tooltip='{{row.entity[col.colDef.name]}}' tooltip-placement='bottom' tooltip-animation='true' " +
        "ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" " +
        "class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader, different:!row.entity.isSame }\" ui-grid-cell></div>"

i have played around with the z-index css property but still no help, what am i doing wrong here

.tooltip {
    position: absolute;
    z-index: 10;
}
.ui-grid-header{
    position: relative;
    z-index: 2;
}

Answer 1

Try adding this option to append tooltip to body instead of parent element:

tooltip-append-to-body='true'

I hope it helps, Thanks.