Pop-up tooltip displayed behind a modal window

Question

I have a modal window that consists of this div :

 <div class="input-group"> <div class="input-group-addon" title="Insert here your domain account name" data-toggle="tooltip" data-placement="left" id="Account"> @Html.Label("Domain account name", new { @class = "control-label" }) </div> <div class="a"> @Html.TextBoxFor(model => model.Login, new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.Login) </div> </div> 

As you can see, the shortcut has a tooltip.

It is activated using this code:

 $('#Account').tooltip({ container: 'body' }); 

The code works, but a tooltip is shown behind the modal. I tried to set the z-index tooltip as follows:

 .tooltip { z-index: 1151,!important; } 

or

  #Account { z-index: 1151,!important; } 

but none of them worked.

Can you suggest how do I customize the CSS so that this tooltip appears on top of the modal?

Answer 1

Try it without a decimal before! important:

 .tooltip{ z-index: 1151 !important; } 

Answer 2

it worked for me.

 .tooltip{ z-index: 1 !important; }