CODEWITHSUNDEEP
laravelbootstrap-5laravel-livewire
Hardik Sisodia
Hardik Sisodia

Reputation: 635

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

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?

Upvotes: 3

Views: 2659

Answers (5)

Kirlos Osama
Kirlos Osama

Reputation: 1

Livewire 3 & Bootstrap v5

  Livewire.hook('morph.updated', () => {
            document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
              // If the element is currently hovered, skip it
              if (el.matches(':hover')) {
                return;
              }
              const existingTooltip = bootstrap.Tooltip.getInstance(el);
              if (existingTooltip) {
                // Hide and dispose of the existing tooltip instance
                existingTooltip.hide();
                existingTooltip.dispose();
              }
              // Initialize a new tooltip for the element
              new bootstrap.Tooltip(el);
            });
          });

Upvotes: 0

Xahed Kamal
Xahed Kamal

Reputation: 2223

Previous answers didn't work me. I'm using Laravel 11 and Livewire 3. Here is the code I used to get the tooltips work properly -

function activate_bs_tooltips(){
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
}

document.addEventListener("DOMContentLoaded", () => {
    activate_bs_tooltips(); // If you're using full page component, you can remove this.
    
    Livewire.hook('component.init', ({ component, cleanup }) => {
        activate_bs_tooltips();
    });
});

Hope this help

Upvotes: 0

David Figueras Tamame
David Figueras Tamame

Reputation: 81

This work for Bootstrap 5.x + Laravel 10.x + Livewire 3.x


<button wire:click = "$dispatch('askForChangeStatus', {state:{{ $User->state }}})" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="@t('Disable Account')"  class="btn btn-warning-light btn-wave waves-effect waves-light p-2">
    <i class="bi bi-slash-circle fs-5 fw-semibold d-flex m-auto"></i>
</button>

The key in my case was to use data-bs-original-title instead of the original title attribute. No js code require.

Upvotes: 1

Jack
Jack

Reputation: 9784

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.

Upvotes: 9

Prospero
Prospero

Reputation: 2352

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');
}

Upvotes: 1

Related Questions