0

我有一个带形式的模态。输入有一个弹出框，当输入聚焦时显示，当输入模糊时隐藏。

当我打开一个模式时，然后单击第一个输入 - 弹出框会正确显示。但在那之后它不起作用。

这是我的代码：

HTML：

<input type="text" data-trigger="focus" data-toggle="tooltip" data-container="body" data-placement="right" data-title="Foo">
<input type="text" data-trigger="focus" data-toggle="tooltip" data-container="body" data-placement="right" data-title="Bar">

jQuery代码：

$("input[data-toggle='tooltip']").on('focus', function() {
    $(this).tooltip('show');
});

$("input[data-toggle='tooltip']").on('blur', function() {
    $(this).tooltip('hide');
});
4

1 回答 1

1

tooltip对我来说，显示的问题似乎inputs正在发生，因为输入在modal.

即使在模态框内的输入也可以显示工具提示，但由于模z-index态框大于工具提示，您将无法看到它们。

我更改了 tooptip 元素的 z-index，现在它可以工作了，所以你可以参考这个 ** JSFIDDLE来查看一个实时示例**

HTML：

<input type="text" data-trigger="focus" data-toggle="tooltip" data-container="body" data-placement="right" data-title="Foo">
  <br>  
<input type="text" data-trigger="focus" data-toggle="tooltip" data-container="body" data-placement="right" data-title="Bar">

    <br><br>
    <!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Modal title</h4>
        </div>
        <div class="modal-body">

          <input type="text" data-trigger="focus" data-toggle="tooltip" data-container="body" data-placement="right" data-title="Foo">
  <br>  
<input type="text" data-trigger="focus" data-toggle="tooltip" data-container="body" data-placement="right" data-title="Bar">

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

JS：

$("input[data-toggle='tooltip']").on('focus', function() {
    $(this).tooltip('show');
});

$("input[data-toggle='tooltip']").on('blur', function() {
    $(this).tooltip('show');
});

CSS：

.tooltip{
    z-index:100000000;
}
于 2013-10-17T12:10:28.173 回答