CODEWITHSUNDEEP
kendo-uikendo-gridtwitter-bootstrap-tooltip
sheamus
sheamus

Reputation: 3153

Bootstrap tooltip doesn't hide when modal triggered if placement=body

I have a kendo grid which each row has an edit button. I am using Bootstrap to add a tooltip to the edit button, as well as other things. The edit button brings up a window to edit the attributes of the row model.

The tooltip kept getting cut off by the boundaries of the grid. To solve this I used placement=body when initializing the tooltips.

The problem I have now, is that the the tooltip does not hide if the button is clicked, and the editor window comes up. I tried changing the trigger to just be 'hover', but that did not help.

I tried doing ('[title]').tooltip('hide') in the edit event of the grid, but that doesn't seem to work at all.

I believe the problem has to do with 'edit' opening a kendo window. Because the other buttons with tooltips are fine, as they trigger a BootstrapDialog.

Upvotes: 2

Views: 1197

Answers (1)

Cyril Lavedrine
Cyril Lavedrine

Reputation: 161

What happens is that the .tooltip has a z-index of 1070 while .modal has a z-index of 1050.

You can add the following to your css to ensure that .tooltip is displayed below .modal : 

.modal{
  z-index: 1071;
}

Of course, this means that you absolutely can't have a tooltip displayed from inside your modal, so this maybe doesn't suit your specific needs. If that's the case, you should be able to add another class to your tooltip div and override the z-index on this class.

I'm well aware of the monkey-patch nature of this fix, but I've looked for a solution for this for weeks and couldn't find anything better.

Upvotes: 1

Related Questions