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以使这个工具提示显示在模态之上？

Answer 1

在没有逗号之前尝试！important：

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

Answer 2

这对我有用。

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

Answer 3

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

所以就像

COST CENTRE MODULE    SRC                    %time %alloc

seqList     Main      lab.hs:39:1-39          93.3   97.3
chunkUpdate Main      lab.hs:(58,1)-(62,26)    2.8    1.6
roundUpdate Main      lab.hs:(65,1)-(71,21)    1.6    1.0

显示在模态窗口后面的Bootstrap工具提示

3 个答案: