Bootstrap 4.6 动态生成模态框内Tooltip提示框不显示问题排查

架构老林

2026-9-30

故障原因

依赖缺失：Bootstrap 4.6 的 tooltip 功能强依赖 Popper.js 库，如果未引入或引入顺序晚于 Bootstrap.js，会导致样式化 tooltip 无法渲染，仅显示原生 title 提示。
初始化时机错误：如果模态框内容是异步动态填充的，shown.bs.modal 触发时异步请求尚未返回、目标元素还未挂载到 DOM，全局查找 [data-toggle="tooltip"] 找不到对应元素，自然初始化失败。
重复初始化冲突：如果页面其他位置已经初始化过同选择器的 tooltip，未销毁旧实例直接重复初始化会导致功能失效。
挂载容器错误：默认 tooltip 会挂载到 body 上，在模态框场景下容易出现层级、定位异常。

解决方案

首先检查依赖引入顺序，Ruby on Rails 项目可在 app/assets/javascripts/application.js 中确认，必须保证 Popper.js 引入在 Bootstrap.js 之前：

// 正确引入顺序示例
//= require popper
//= require bootstrap

修正初始化逻辑，改为在模态框内部查找目标元素，先销毁旧实例再重新初始化，同时指定 tooltip 挂载到当前模态框内：

$(document).on('turbolinks:load',function() {
  $('#my_lg_modal').on('shown.bs.modal', function() {      
    console.log("modal shown");
    const $currentModal = $(this);
    // 处理tooltip
    $currentModal.find('[data-toggle="tooltip"]')
      .tooltip('dispose') // 销毁已存在的实例，避免冲突
      .tooltip({
        container: $currentModal // 指定挂载容器为当前模态框，自动处理层级
      });
    // 处理popover
    $currentModal.find('[data-toggle="popover"]')
      .popover('dispose')
      .popover({
        container: $currentModal
      });
  });
});