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;
}

do you have a fiddler?

raven
– raven

2016-04-27 19:16:37 +00:00
Commented Apr 27, 2016 at 19:16 — raven
– raven, Commented Apr 27, 2016 at 19:16
yes i do have fiddler

josh_boaz
– josh_boaz

2016-04-27 19:21:12 +00:00
Commented Apr 27, 2016 at 19:21 — josh_boaz
– josh_boaz, Commented Apr 27, 2016 at 19:21

Shady Alset · Accepted Answer · 2016-04-27 19:13:01Z

4

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

tooltip-append-to-body='true'

I hope it helps, Thanks.

answered Apr 27, 2016 at 19:13

Shady Alset

5,7044 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

bootstrap tooltip is displaying behind ui-grid header

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related