Topic: Is dynamic creation of a tooltip even possible? A tooltip not showing up.
Hello,
Having problems with a tooltip created dynamically over an icon in jQuery as in the provided code example:
$('[data-criteria]').each(function () { if ($(this).attr("data-criteria") === "undefined") { $(this).removeAttr("data-criteria"); } else { $(this).append(" <a style='white-space: nowrap;'><i class='fa fa-info-circle' data-toggle='tooltip' data-html='true' data-placement='top' title='" + $(this).attr('data-criteria') + "'></i></a>"); } });
Funnily, when I move the code around from document.ready to/from window.onload the mdbootsrap tooltip shows up but is not sustained between page reloads.
On any other eleements on my page (buttons) the tooltip shows up correctly.
Any hints on that? Thanks in advance.
PS. No option here to upload images from my dev machine. The dialog for that says "Source", but there's no possibility to drag/drop or select an image.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: Laptop
- Browser: FF, Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 6 years ago
Hi,
I think it is possible to create the dynamic tooltip. Did you try to initiate function tooltip() in that each() function?
Best,
Piotr
Greg Greansky commented 6 years ago
Yup, that's it. Even though I had the tooltip initialized elsewhere in the js script this had to be repeated inside the each() function as well.
Thanks, Piotr.