Breaking tooltip , overlaytrigger.
Bootstrap tooltip ,overlaytrigger are broken in Metronic v8, is showing at the end of the page (bottom left), this behavior is sometimes when you hover the container. What I use after redering any data in the container(modal, div, etc) is initialize it with:
$(function () {
$(container).tooltip({
selector: "[data-bs-toggle='tooltip']"
});
});
this works for me in v7 with no issues of course (data-bs-toggle=data-toggle), any advice?
I'm asking as I saw other questions related but are private.
Thanks.
Replies (7)
Hi,
Metronic uses the Tooltip as it is without any core modification. I guess this must be the expected behavior of the Bootstrap Tooltips component.
Could you please double check the Metronic Bootstrap Tooltip initialization examples in the documentation here ? As can be seen, the Tooltips initialization works as expected.
You can try to use container to specify the parent container element for the tooltip as explained in the original documentation.
<span data-bs-toggle="tooltip" title="test" data-bs-container="#my_modal">Test</span>If you need any further help could you please send me your test link so i can debug it in your page online using chrome dev tools.
Regards.
I tested on https://preview.keenthemes.com/html/metronic/docs/base/tooltips and is having same issue, I reproduce the error here https://www.loom.com/share/b4a7dbbe7f204943b2f313903f9504f1
Issue is happening randomly, but in my case I'm seeing more often..
Thanks...
Hi,
Thank you for providing more info.
I just tested on Mac/Chrome/Firefox/Safary and no such behavior was encountered.
May I know your OS and browser versions?
Could you please test the original Bootstrap version as well
Regards.
Hi
I'm using and tested on windows11 Home/Chrome Version 106.0.5249.119 (Official Build) (64-bit), and yes I already test it directly from bootstrap and is working fine...
Very strange as metronic v7 doesn't have this issue, as I have other projects on v7.
Thanks..
Hi,
Thanks for sharing this info. Could you please try to change the popperjs's version in tools/package.json:
"@popperjs/core": "2.11.6"And reinstall the dependencies with
yarn command by removing the node_modules folder and yarn.lock.Then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment you will only need the compile assets, no need to install the build tools dependencies there.
Regards.
Hi
Let me try, I don't use it or install it like that, I just include the .js files (not expert), let me find a way and check version of popper. I will let you know any update.
Thanks
Sure, if you follow Metronic docs you will be able to install the build tools and recompile the assets.
