Laravel Livewire：Livewire 验证后不显示 Bootstrap 工具提示

Question

最近，我发现在使用 Livewire 验证或执行任何特定任务后，我的 Bootstrap 5 工具提示停止工作。每当 livewire 将数据发送到服务器以验证或更改某些内容时，我的工具提示就像普通的标题标签一样。

验证前：

验证后： [

刀片 HTML：

<abbr data-bs-toggle="tooltip"
      data-bs-placement="left"
      data-bs-html="true"
      title="{!! trans('mmhg_fullform') !!}">
     {!! trans('mmhg') !!}
</abbr>

不太清楚为什么会发生这种情况，我在js中也有一段代码

$('[data-bs-toggle="tooltip"]').tooltip();

我们是否必须在任何地方进行某些更改才能在 Livewire 组件中使用引导工具提示？

Answer 1

我对这里发布的其他答案遇到了麻烦，似乎简单地.tooltip()再次调用与 Livewire 不一致，我怀疑是由于 DOM 差异问题。

这是我找到的解决方案：

对于 Bootstrap 4

$(document).ready(function() {

  // ...

  // Enable Bootstrap tooltips on page load
  $('[data-toggle="tooltip"]').tooltip();

  // Ensure Livewire updates re-instantiate tooltips
  if (typeof window.Livewire !== 'undefined') {
    window.Livewire.hook('message.processed', (message, component) => {
        $('[data-toggle="tooltip"]').tooltip('dispose').tooltip();
    });
  }

});

对于引导5

$(document).ready(function() {

  // ...

  // Enable Bootstrap tooltips on page load
  $('[data-bs-toggle="tooltip"]').tooltip();

  // Ensure Livewire updates re-instantiate tooltips
  if (typeof window.Livewire !== 'undefined') {
    window.Livewire.hook('message.processed', (message, component) => {
        $('[data-bs-toggle="tooltip"]').tooltip('dispose').tooltip();
    });
  }

});

这会检查以确保 Livewire 首先加载到页面上，因此即使您只在某些页面上使用 Livewire，您也可以将其包含在普通 JS 中。

首先调用tooltip('dispose')将允许重新实例化页面上的所有新的和现有的工具提示。