Bootstrap工具提示不适用于模态

时间:2016-10-10 14:20:01

标签: html twitter-bootstrap

我的工具提示正在完美地在主页上工作。在稍后由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>

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

5 个答案:

答案 0 :(得分:5)

可能是因为在模式的内容已插入文档后,您应该致电$('.tooltips').tooltip();

否则,请发布您当前代码的小提琴,我们可以对其进行测试。

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

问题是由于模态和工具提示的z-index而引起的。你可以试试看,

.tooltip {
    z-index: 100000000; 
}

答案 3 :(得分:0)

也许这对某人有帮助:我有一个案例,需要使用ajax来填充并在单击时显示一个引导模式(渲染视图)(在下面调用showModal(url,event));引导工具提示以及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'}
        });
    });

答案 4 :(得分:0)

解决此问题的最佳方法是在md-tooltip中添加此道具:

md-z-index="9999"

或其他z-index。 无需在CSS中对此进行硬编码。 您还可以在控制器内部的范围变量中定义z-index,如下所示:

// in controller
$scope.btnOptions = {
   isOpen:false,
   label: 'test button',
   class: 'md-scale',
   zIndex: 99999
}; 

在您的html中(通常我会使用{{}}来打印变量,但是我在laravel上,所以我改用<%%>

  <md-button aria-label="Édit" class="md-fab md-raised md-mini">
      <md-tooltip md-direction="top" md-z-index="<% btnOptions.zIndex %>">Mode édition</md-tooltip>
  <i class="far fa-edit"></i>
  </md-button>