【问题标题】:twitter bootstrap tooltip showed behind modal推特引导工具提示显示在模态后面
【发布时间】:2014-04-09 10:05:07
【问题描述】:

我在输入组内有一个带有跨度的工具提示,它显示在主模式 div 后面的模式弹出窗口中..

这是我在表单组中的工具提示

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

这是我的模态:

<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">&times;</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>

已解决

我解决了这个问题:

data-container="body"

为:

data-container=".modal-body"

【问题讨论】:

    标签: javascript html twitter-bootstrap tooltip


    【解决方案1】:

    Modals 有更高的 z-index,检查它的 z-index,然后给工具提示更高的 z-index。这可能会解决它

    【讨论】:

      【解决方案2】:

      如果我更改 z-index 它会起作用,我会在标签标签中使用工具提示。但是,标签标签有东西,它消失了。只是工具提示正在显示。另外,我没有使用 data-container="body"

      更新:

      我添加css文件位置:固定; 现在,标签和工具提示正在显示。

      .tooltip { 
          z-index: 100000000 !important;
          position: fixed;
      }
      

      我根据自己的情况更改了 z-index 值。

      【讨论】:

      • 请将用户提出的问题的答案连同代码 sn-p 一起发布。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-12-30
      • 1970-01-01
      • 1970-01-01
      • 2013-05-07
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多