Bootstrap工具提示显示在模态窗口后面 [英] Bootstrap tooltip showing behind modal window

问题描述

我有一个模式窗口，其中包含 div ：

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.

它用这个代码初始化：

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

代码正在工作，但工具提示显示在模态之后。我尝试设置工具提示的 z-index ，如下所示：

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;
}

或

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

但都没有效果。

你可以建议我如何设置CSS，使这个工具提示显示在模态之上？

Can you suggest how should I set up CSS to make this tooltip show on top of the modal?

推荐答案

请不要使用逗号！重要：

Try without comma before !important:

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

这篇关于Bootstrap工具提示显示在模态窗口后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！