szpic szpic - 2 months ago 15
CSS Question

Bootstrap tooltip showing behind modal window

I have a modal window which consists 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, there is a tooltip on the label.

It's initalized with this code:

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


The code is working, but the tooltip is showing behind the modal. I tried setting the
z-index
of the tooltip like this:

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


or

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


but none of them worked.

Can you suggest how should I set up CSS to make this tooltip show on top of the modal?

Answer

Try without comma before !important:

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