I have a tooltip with span inside input-group which is showed in modal popup behind the main modal 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. That might solve it
I use tooltip in a label tag if i change z-index it worked. However, label tag has something and it was gone. Just tooltip is showing. Also, I did not use data-container="body"
UPDATE:
I add css file position: fixed; now, label and tooltip is showing.
.tooltip {
z-index: 100000000 !important;
position: fixed;
}
I changed z-index value according to my situation.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With