时间戳

首页 > 解决方案 > Bootstrap 4.6 工具提示未显示在动态生成的模式内容中

javascript - Bootstrap 4.6 工具提示未显示在动态生成的模式内容中

问题描述

我正在动态填充 Bootstrap 4.6 模式对话框，并且带有工具提示的元素不再显示工具提示。

<div class="modal-tooltip text-center mb-2" data-toggle="tooltip" data-placement="top" data-html="true" title="<strong>Theme 1</strong><br><span class='small'>This is a longer description of the Theme</span>">
  <span class="card-text m-1 px-3 py-2 rounded" style="background-color: grey; color: white;">
    <strong><a class="text-white" href="/themes/1">Theme 1</a></strong>
  </span>
</div>

根据该网站先前的建议，我添加了一个用于加载模式对话框的处理程序以激活元素上的工具提示：

（这是在 RoR - 因此在 'turbo links:load' 事件中）

$(document).on('turbolinks:load',function() {

  // re-enable tooltips/popover on show modal
  // https://stackoverflow.com/questions/39960446/bootstrap-tooltip-doesnt-work-in-modal
  $('#my_lg_modal').on('shown.bs.modal', function() {      
    console.log("modal shown");
    $('[data-toggle="tooltip"]').tooltip()
    $('[data-toggle="popover"]').popover()
  });

});

我知道代码在显示对话框时正在运行，因为控制台中显示了“模态显示”消息。

我也尝试添加此 CSS，但我确信这不是问题，因为“标题”显示为未格式化的鼠标悬停文本，而不是工具提示格式的元素。

// fix for tooltips in modal dialog
.modal-tooltip {
  z-index: 100000000; 
}

感谢您的任何建议。

标签： javascriptjquerytwitter-bootstrapbootstrap-4bootstrap-modal

解决方案

推荐阅读