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

Question

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

验证前：

验证后： [

Blade 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 组件中使用 bootstrap 工具提示？

Answer 1

试试这个，保持水分 blade re-render...我没有测试过，只是尝试一下。

在 blade 脚本部分

window.livewire.on('tooltipHydrate', () => {
    $('[data-bs-toggle="tooltip"]').tooltip();
});

在组件中

public function hydrate()
{
  $this->emit('tooltipHydrate');
}

Answer 2

我在这里发布的另一个答案有问题，似乎只是再次调用 .tooltip() 与 Livewire 不一致，我怀疑是由于 DOM 差异问题。

这是我找到的解决方案：

为Bootstrap4

$(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();
    });
  }

});

为Bootstrap5

$(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') 将允许页面上所有新的和现有的工具提示 re-instantiated。

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

Laravel Livewire: Bootstrap Tooltip doesn't show up after livewire validation

laravel

laravel-livewire

bootstrap-5