Flowbite & LiveWire - Force re-render

Question

I'm working with the following stack:

• Laravel 10.29.0
• Livewire 2.12
• TailwindCSS 3.3.5
• AlpineJS 3.13.1
• Flowbite 2.0.0
• PHP 8.2

My issue is around Livewire updating the entire DOM when content is re-rendered using Flowbite. Specifically, I'm dealing with tooltips and pagination, but I'd imagine the issue will affect all Livewire related components. When the page initially loads, tooltips work as expected. However, when I navigate to page 2, the tooltips stop rendering on hover.

I believe this is a fairly common issue with Livewire and other JS libraries not playing nicely together, because the whole DOM is re-rendered. So far, I've tried forcing the tooltips to re-render when a Livewire update is detected, but that doesn't give me the desired result, and tooltips aren't rendered when Livewire changes the page.

Does anyone have any methods to fix this? I've considered upgrading to Livewire version 3, but it doesn't look like they have made any changes to how the DOM is manipulated.

Thanks

Here's a code example that I'm using:

<div
    id="tooltip-foo{{ $bar->id }}"
    role="tooltip"
    class="
        absolute
        ...
        shadow-sm
        opacity-0
        tooltip
        dark:bg-gray-700">
    {{
        \Carbon\Carbon::parse($bar->birthdate)
            ->format('j F Y, g:i A')
    }}
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

Answer 1

In app.js add:

• Livewire v2:

    import { initFlowbite } from 'flowbite';
    
    Livewire.hook('message.processed', (message, component) => {
        initFlowbite();
    })

• Livewire v3:

import { initFlowbite } from 'flowbite';

Livewire.hook('commit', ({ component, commit, respond, succeed, fail }) => {
    succeed(({ snapshot, effect }) => {
        queueMicrotask(() => {
            initFlowbite();
        })
    })
})

document.addEventListener('livewire:navigated', () => {
    initFlowbite();
})