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?
Try without comma before !important:
.tooltip{
z-index: 1151 !important;
}