Подсказка Bootstrap, отображаемая за модальным окном

у меня есть модальное окно, которое состоит этот 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>

как вы можете видеть, на этикетке есть подсказка.

он инициализирован этим кодом:

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

код работает,но подсказка отображается за модальным. Я попытался установить z-index из всплывающей подсказки, как это:

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

или

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

но ни один из них не работал.

можете ли вы предложить, как я должен настроить CSS, чтобы сделать это всплывающая подсказка показывает поверх модального?