[英]twitter bootstrap tooltip showed behind modal
I have a tooltip with span inside input-group which is showed in modal popup behind the main modal div..我在输入组内有一个带有 span 的工具提示,它显示在主模态 div 后面的模态弹出窗口中。
This is my tooltip inside a form-group这是我在表单组中的工具提示
<div class="form-group margin-none innerB">
<label for="form_field_name" class="col-sm-3 control-label">label</label>
<div class="col-md-9">
<div class="input-group">
<input type="text" id="form_field_name" name="form_field_name" class="form-control" value="0" readonly="readonly" />
<span class="input-group-addon" data-toggle="tooltip" data-container="body" data-placement="top" data-original-title="tooltip text"><i class="fa fa-question-circle"></i></span>
</div>
</div>
And this is my modal:这是我的模态:
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="modalLabel">Modal Title</h4>
</div>
<div class="modal-body">
<div id="modal_body" class="modal-body padding-none">
<div class="lead separator center relativeWrap">
<p class="innerTB margin-none">
<i class="fa fa-fw fa-spinner fa-spin"></i> loading
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
SOLVED解决了
I fixed the problem changing this:我解决了这个问题:
data-container="body"
for:为了:
data-container=".modal-body"
Modals have higher z-index, check out the z-index of it, and give higher then that of to the tooltip.模态具有更高的 z-index,查看它的 z-index,并在工具提示中给出高于的 z-index。 That might solve it
那可能会解决它
I use tooltip in a label tag if i change z-index it worked.如果我更改了 z-index,我会在标签标签中使用工具提示。 However, label tag has something and it was gone.
然而,标签标签有一些东西,它不见了。 Just tooltip is showing.
只显示工具提示。 Also, I did not use data-container="body"
另外,我没有使用data-container="body"
UPDATE:更新:
I add css file position: fixed;我添加 css 文件位置:固定; now, label and tooltip is showing.
现在,标签和工具提示正在显示。
.tooltip {
z-index: 100000000 !important;
position: fixed;
}
I changed z-index value according to my situation.我根据我的情况更改了 z-index 值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.