[Experimental] Livewire 3 - Bootstrap 5 - Fix tooltip not working when the component is refreshed.

app.js

import {Alpine, Livewire} from '../vendor/livewire/livewire/dist/livewire.esm';


let isTooltipHovered = false;

document.addEventListener('mouseover', function (event) {
    if (event.target.matches('[data-bs-toggle="tooltip"]') ||
        (event.target.closest('.tooltip') && bootstrap.Tooltip.getInstance(event.target.closest('.tooltip')))) {
        isTooltipHovered = true;
    } else {
        isTooltipHovered = false;
    }
});


Livewire.hook('commit.prepare', ({component, commit}) => {
    const visibleTooltips = document.querySelectorAll('.tooltip.show');
    if (visibleTooltips.length > 0) {
        visibleTooltips.forEach(tooltip => {
            let tooltipInstance = bootstrap.Tooltip.getInstance(tooltip);
            if (tooltipInstance && !isTooltipHovered) {
                tooltipInstance.hide();
            }
        });
    }
});


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

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

Livewire.start()