Tooltip Metronic style

Hi,

I'm using Metronic 8.1.6. on ASP.NET MVC web app (not Core!). I'm trying to implement tooltip on help button on page like in index.html in demo 1.
What js/css I should include beside mandatory js?

Kind Regards,
Valentin

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

Hi Valentin Faganel,

For tooltips you just need to include two mandatory js files listed below.

"plugins/global/plugins.bundle.js",
"js/scripts.bundle.js"

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,

I have those js's included already. It must be something else to blame.

Regards,
Valentin

Hi,

We are initializing tooltips inside src/js/components/app.js which should already be included inside scripts.bundle.js, if tooltips still don't work you need to make sure that KTApp.init function is triggered, if not you can trigger it manually from your code.

I would suggest you make sure that you are using tooltips correctly. Your tooltip toggle element should have data-bs-toggle, data-bs-placement and title.

Here is an example:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>

You can find more examples in our tooltips documentation.
https://preview.keenthemes.com/html/metronic/docs/base/tooltips

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,
Here is my code in partial view, which i'm using to toggle help on editing text in my app:




Help




...

Instead of title i use data-bs-original-title, although on page https://preview.keenthemes.com/html/metronic/docs/base/tooltips is written to use title. But in html code behind is used data-bs-original-title

KTApp.init() is triggered in script.bundle.js, which i checked through debugging. Adding KTApp.init() on page does not help.

Regards,
Valentin

Hi,

Can you try to call KTApp.init() inside 500ms delay?

setTimeout(()=>{
KTApp.init()
}, 500)

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,

I found solution in removing data-kt-initialized="1" from button.
I tried your code and it worked right away. So I compared it with mine and found my error.
Thanks for your help!

Best Wishes,
Valentin

Hi Valentin Faganel,

Glad to hear that. All the best to your project!

Regards,
Lauris Stepanovs,
Keenthemes Support Team

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  :(