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

Bootstrap tooltip showing behind modal window

本文关键字：窗口 模态 工具提示 显示      更新时间：2023-09-26

我有一个模态窗口，由以下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使这个工具提示显示在模态的顶部吗?

试一试!

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

只做一件事。检查你的模式弹出框的z索引&设置工具提示z-index +1的模式弹出式z-index。

所以应该是

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

这对我来说很有效。

.tooltip{
  z-index: 1 !important;
}
相关文章：