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

Question

I recently found my bootstrap 5 tooltips stopped working after I use livewire to validate or do any certain task. Whenever livewire sends the data to the server to validate or change something, my tooltips come like the normal title tag.

Before Validation:

After Validation: [

Blade HTML:

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

Not really sure why is this happening, I also have a code in js

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

Do we have to make certain changes anywhere to use bootstrap tooltips in livewire components?

Answer 1

I had trouble with the other answer posted here, it seems simply calling .tooltip() again doesn't work consistently with Livewire, I suspect due to DOM diffing issues.

This was the solution I found:

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

});

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

});

This checks to ensure Livewire is loaded on the page first, so you can include it in your normal JS even if you only use Livewire on certain pages.

Calling tooltip('dispose') first will allow all new and existing tooltips on the page to be re-instantiated.