[英]React and Bootstrap: tooltip inside modal (appears behind modal window)
[英]Bootstrap tooltip showing behind modal window
我有一个模态窗口,包含这个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;
}
这对我有用。
.tooltip{
z-index: 1 !important;
}
做一件事。 检查模态弹出窗口的z-index并设置模态弹出窗口z-index的工具提示z-index +1。
所以它会是这样的
.tooltip{
z-index:( z-index of modal popup + 1 );
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.