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?