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

9lowa7mx  于 2023-06-04  发布在  Bootstrap
关注(0)|答案(6)|浏览(243)

我的工具提示在主页上工作得很好。在稍后由 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>

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

neskvpey

neskvpey1#

这可能是因为你应该在modal的内容被插入到文档中之后调用$('.tooltips').tooltip();
否则,请发布一个小提琴与您当前的代码,我们可以测试它。

pgky5nke

pgky5nke2#

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

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

7tofc5zh3#

如果你使用react,我有一个不同的答案。你所要做的就是给予父容器一个ref,然后在overlayTrigger组件中,你只需要把ref作为一个参数传递给容器。

import React, { Component } from 'react';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';

class random extends Component {
  constructor(props) {
    super(props);
    this.ref= React.createRef()

  }

  render() {
    return (
      <div ref={this.ref}>
            <OverlayTrigger
              placement="top"
              container={this.ref}
              overlay={
                <Tooltip data-container="body">Some text</Tooltip>
              }
            >
              <span className="d-inline-block">
                <i className="mdi mdi-help-circle pointer"></i>
              </span>
            </OverlayTrigger>
      </div>
    );
  }
}
ix0qys7i

ix0qys7i4#

也许这对某人有帮助:我有一个案例,当需要 AJAX 来填充和显示一个bootstrap模式(呈现视图)时(调用下面的showModal(url,event)); bootstrap tooltip和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'}
        });
    });
7dl7o3gd

7dl7o3gd5#

修复此行为的最佳方法是在md-tooltip中添加此prop:md-z-index="9999"
或者不同的z索引。不需要在CSS中硬编码。您还可以在控制器内的范围变量中定义z索引,如下所示

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

u91tlkcl6#

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

.tooltip {
    z-index: 100000000; 
}

相关问题