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
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:
<script type="text/javascript" src="~/_keenthemes/src/js/components/app.js"></script>
<!--begin::Engage toolbar-->
<div class="engage-toolbar d-flex position-fixed px-5 fw-bold zindex-2 top-50 end-0 transform-90 mt-5 mt-lg-20 gap-2">
<!--begin::Help drawer toggle-->
<button
class="engage-help-toggle btn engage-btn shadow-sm px-5 rounded-top-0"
data-bs-toggle="tooltip" data-bs-placement="left" data-bs-dismiss="click"
data-bs-trigger="hover" data-bs-original-title="Help on editing" data-kt-initialized="1">
Help
</button>
<!--end::Help drawer toggle-->
</div>
<!--end::Engage toolbar-->
<div class="bg-body drawer drawer-end" data-kt-drawer="true" data-kt-drawer-name="help" data-kt-drawer-activate="true" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'350px', 'md': '525px'}" data-kt-drawer-direction="end" data-kt-drawer-toggle="#kt_help_toggle" data-kt-drawer-close="#kt_help_close" >
<!--begin::Card-->
...
<!--end::Card-->
</div>
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
