szpic szpic - 1 year ago 71
CSS Question

Bootstrap tooltip showing behind modal window

I have a modal window which consists this


<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 class="a">
@Html.TextBoxFor(model => model.Login, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Login)

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
of the tooltip like this:

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


#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 Source

Try without comma before !important:

  z-index: 1151 !important;