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

Question

我最近发现在我使用 livewire 验证或执行任何特定任务后，我的引导程序 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

试试这个，为了在刀片重新渲染时保持那个元素的水分......我没有测试它，只是尝试一下。

在刀片脚本部分

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

在组件中

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