引导工具提示出现在模态窗口后面

Question

我有一个模态窗口，其中包含这个 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，使得这个工具提示显示在模态框的上方吗？

- szpic

Answer 1

在!important前尝试不要使用逗号：

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

- Qwal

Answer 2

只需要做一件事情。检查您的模态弹出窗口的 z-index，然后将工具提示的 z-index 设置为模态弹出窗口 z-index 的 +1。

因此，它应该是这样的：

```css .tooltip { z-index: [modal popup z-index + 1]; } ```

.tooltip{
  z-index:( z-index of modal popup + 1 );
}

- Kaushik Thanki

Answer 3

这对我有用。

.tooltip{
  z-index: 1 !important;
}

- JHOAN B. HENRICHE