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

Question

我最近发现我的 bootstrap 5 工具提示在我使用 livewire 验证或执行任何特定任务后停止工作。 每当 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

试试这个，以保持刀片重新渲染中的元素水分......我没有测试它，只是试试。

在刀片脚本部分

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

在组件中

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