Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

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?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)


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



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.



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 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!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
buy metronic

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply