Bootstrap Tooltips not Initialized
Hi all,
I am currently facing the issue that the Bootstrap tooltips won't show up.
I use
```js
$(document).ready(function () {
// Init Metronic core components
KTComponents.init();
});
```
to initialize the components. That works fine for the other components.
Unfortunately, the bootstrap tooltips are not being loaded (the default browser title style is displayed).
If I use
```js
setTimeout(function () {
KTComponents.init();
}, 200);
```
in my ready function, it works.
Any ideas on how to fix this issue?
Replies (10)
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
Your Support Matters!
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 Faizal,
I found a similar solution.
I used this:
Livewire.hook("message.processed", function () {]);Thank you for the help!
Best regards
Sebastian
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.
Hi,
I am using the latest Metronic version.
In general I have the HTML template installed in a custom variant to fit my Laravel project with Vite.
So I am manually initializing the components with KTComponents.init().
The data attribute is also set correctly.
Best regards.
Hi,
If the tooltip element exists when KTComponents.init() is called then it should work as expected.
Can you try to call it with the onDOMContentLoaded handler:
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTComponents.init()
});Do you get any js errors in your browser console? Can you share your test link in a private link or screenshots via https://imgur.com/ ?
Regards.
The issue still persist.
Could the "modulepreload" in the generated HTML script tag cause this problem?
I am using module imports with Vite in Laravel (maybe a further explanation is needed for my structure, just tell me if you need some clarification).
Best regards.
EDIT:
I am using Laravel Livewire which caused the DOM to update. I need to re-init the components on every Livewire DOM update.
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);
