显示在模态窗口后面的引导工具提示答案

【问题标题】：Bootstrap tooltip showing behind modal window显示在模态窗口后面的引导工具提示
【发布时间】：2014-03-24 07:22:31
【问题描述】：

我有一个由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 以使此工具提示显示在模式顶部？

【问题讨论】：

标签： javascript css twitter-bootstrap tooltip twitter-bootstrap-tooltip

【解决方案1】：

尝试在 !important 之前不加逗号：

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

【讨论】：

【解决方案2】：

只做一件事。检查模态弹出窗口的 z-index 并设置模态弹出窗口 z-index 的工具提示 z-index +1。

应该是这样的

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

【讨论】：

【解决方案3】：

这对我有用。

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

【讨论】：