Tooltips tag from ajax calls not working, any help to fix it?
Thanks

I have:

$(document).ready(function() {
KTComponents.init();
});


And:
data-bs-toggle="tooltip" aria-label="Tooltip Test Title" data-bs-placement="top" data-bs-original-title="Tooltip Test Title" title="Tooltip Test Title" data-kt-initialized="1"

Hi Sebastian,

I'm glad to hear that you found a solution to your issue! Using the Livewire hook is a great approach to handle post-rendering events in Livewire.

If you have any further questions or need any more assistance, feel free to ask. I'm here to help!

Best regards,
Faizal

Hi Sebastian,

It seems that the issue you're facing with Bootstrap tooltips not showing up is related to the timing of component initialization and DOM updates caused by Laravel Livewire.

When using Livewire, the DOM can be dynamically updated, and sometimes the components need to be re-initialized to ensure proper functionality. In your case, using setTimeout with a delay of 200 milliseconds before re-initializing the components seems to work.

To ensure consistent behavior, you can consider leveraging the Livewire lifecycle hooks to re-initialize the components after each DOM update. Specifically, you can use the livewire:load event, which is triggered when a Livewire component is loaded or re-rendered. Here's an example of how you can utilize it:

document.addEventListener('livewire:load', function () {
    // Re-initialize the components
    KTComponents.init();
});

By doing so, the components will be re-initialized whenever Livewire updates the DOM, ensuring that the Bootstrap tooltips work as expected.

Remember to place this code within a JavaScript file that is loaded on the pages where you need the Bootstrap tooltips.

I hope this helps! Let me know if you have any further questions.

Thanks

Hi,

May I know which Metronic version are you using? By right the core components are initialized automatically on page load and tooltip, popover, etc bootstrap components are initialized on page content ready event.

Are you following the original HTML template which comes with all mandatory assets included?
By right, assets/js/scripts.bundle.js should handle the core component initialization out of the box.

Are you using the tooltips with data-bs-toggle="tooltip" attribute as per the official docs here.

Regards.

Sorry for the weird code format.
Unfortunately I cannot edit the post, so here are the two snippets:

$(document).ready(function () {

// Init Metronic core components

KTComponents.init();

});

setTimeout(function () {

KTComponents.init();

}, 200);