Html 引导工具提示没有';我不能在莫代尔工作

Html 引导工具提示没有';我不能在莫代尔工作,html,twitter-bootstrap,Html,Twitter Bootstrap,我的工具提示在主页上运行得很好。在稍后由ajax调用生成的模式中,这些模式将不起作用 我在生成的模式(ajax调用的结果)中包含了以下代码 重新设置工具提示的步骤 <script> $('.tooltips').tooltip(); </script> $('.tooltips').tooltip(); 在模态的html中 <button class="btn btn-lg default tooltips blue-madison" type="su

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

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

重新设置工具提示的步骤

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

$('.tooltips').tooltip();
在模态的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>

按钮1
按钮2

为什么工具提示不显示-我做错了什么?

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


否则,请发布一篇关于您当前代码的文章,我们可以在那里对其进行测试。

这个问题是因为模态和工具提示的z索引。你可以试试这个

。工具提示{
z指数:100000000;
}

也许这对某些人有帮助:我有一个案例,需要使用ajax在单击时填充和显示引导模式(渲染视图)(调用下面的showModal(url,事件));引导工具提示和fengyuanchen/datepicker没有响应,所以我在检测到模式加载后设法触发它们,如下所示:

    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'}
        });
    });

修复此行为的最佳方法是在md工具提示中添加此道具:

md-z-index="9999"
或者一个不同的z指数。 无需在css中硬编码。 您还可以在控制器内的范围变量中定义z索引,如下所示

// in controller
$scope.btnOptions = {
   isOpen:false,
   label: 'test button',
   class: 'md-scale',
   zIndex: 99999
}; 
在您的html中(通常我会使用{{}}来打印变量,但我在laravel上,所以我使用了


模态条件

另一种解决方案是使用容器选项将工具提示绑定到模型:

$('#modal').on('shown.bs.modal', function() {
  console.log("modal show");
  $('.tooltips').tooltip({
    container: $(this)
  });
});

+1我也这么认为。请尝试类似于
$('.modaDivClassName').on('show.bs.modal',function(){$('.tooltips').tooltips();});
的操作。有关详细信息,请参阅这就是原因。。您需要在您的modal上的show事件上调用
.tooltips()
$('#modal').on('shown.bs.modal', function() {
  console.log("modal show");
  $('.tooltips').tooltip({
    container: $(this)
  });
});