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

user_4791856 0
Viewed 677

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: Before Validation

After Validation: [After Validation2

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?

bootstrap-5 laravel-livewire laravel
2 Answers

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.

user_2577960

try this, to maintain hydrated that element in blade re-render...I don't tested it, just try it.

in blade script section

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

in component

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