为什么引导工具提示在引导模式中不起作用？

Question

我的工具提示在主页面上工作得很好。在稍后由ajax调用生成的模式中，工具提示将不起作用。

我在生成的模式( ajax调用的结果)中包含了以下代码。

重新初始化工具提示的步骤

<script>
  $('.tooltips').tooltip();
</script>

在模式的html中

  <button class="btn btn-lg default tooltips blue-madison" type="submit"
   name="O" data-container="body" data-placement="top" 
   data-original-title="THIS TEXT FOR TOOLTIPS">
     <i class="fa fa-industry blue-madison"></i> BUTTON1
   </button>

  <button class="btn btn-lg default tooltips green-jungle" type="submit" 
    name="P" data-container="body" data-placement="top"
    data-original-title="THIS TEXT FOR TOOLTIPS">
      <i class="fa fa-user green-jungle "></i> BUTTON2
  </button>

为什么工具提示没有显示-我做错了什么？

Answer 1

该问题是由于模式和工具提示的z索引造成的。你可以试试这个，

.tooltip {
    z-index: 100000000; 
}

Answer 2

这可能是因为您应该在将模态的内容插入到文档中之后调用$('.tooltips').tooltip();。

否则，请在我们可以测试的地方摆弄你当前的代码。

Answer 3

也许这对某些人有帮助:我有一个案例，当需要使用ajax来填充和显示引导模式(渲染视图)时(下面调用showModal(url，event) )；引导工具提示和风源晨/日期选择器没有响应，所以在检测到模式加载后，我设法触发了它们，如下所示：

    function showModal(url, event) {
    $.when(
        $.ajax({
            url: url,
            method: 'GET',
            success: function (data) {
                $('#modal-wrapper').html(data);
            }
        })
    ).then(function() {
        $('.loaded_modal').modal().on('shown.bs.modal', function() {
            $('[data-toggle="datepicker"]').datepicker({
                format: "dd/mm/yyyy",
                autoclose: true,
                todayHighlight: true,
                zIndex: 1070,
                container: '.modal'
            });
            $('.modal [data-toggle="tooltip"]').tooltip({trigger: 'hover'}); 
            // could also be on click {trigger: 'hover click'}
        });
    });