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

Posted 2023-05-08

【中文标题】为啥引导工具提示在引导模式中不起作用？

【英文标题】：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>

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

【参考方案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>
    );