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

【问题标题】：Why do bootstrap tooltips not work in bootstrap modals?为什么引导工具提示在引导模式中不起作用？
【发布时间】：2017-02-19 00:04:42
【问题描述】：

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

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

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

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

.tooltip {
    z-index: 100000000; 
}

【讨论】：

【解决方案2】：

可能是因为你应该调用$('.tooltips').tooltip();模态的内容已经插入到文档中。

否则，请将您当前的代码发布在我们可以测试的地方。

【讨论】：

+1 我也这么认为。试试$('.modaDivClassName').on('shown.bs.modal', function() { $('.tooltips').tooltip(); }); 之类的东西，更多信息请参阅The Bootstrap Modal Documentation
这就是原因.. 你需要在你的模态框上调用 .tooltip()

【解决方案3】：

也许这对某人有帮助：当我需要使用 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】：

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

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

【讨论】：

【解决方案5】：

解决此问题的最佳方法是在您的 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>

【讨论】：

【解决方案6】：

如果你使用 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>
    );
  }
}

【讨论】：