Angular / Metronic 9 - Tooltip not showing/working when doing a for loop.
I have a specific issue with tooltip not working/showing when inside a for loop. To elaborate the problem better here are some syntax:
<i (click)="refreshTaskList()"
class="ki-filled ki-arrows-circle text-2xl text-blue-500 cursor-pointer my-auto"
data-tooltip="#refresh_tooltip">
</i>
<div class="tooltip" id="refresh_tooltip">
XXX
</div>The above code works without any problems as intented.
The problem arises when I try to implement tooltip for elements inside a for loop. For example:
<img src="../../../assets/media/avatars/blank.png" alt=""
class="inline size-9 shrink-0 rounded-full border-2 cursor-pointer"
(click)="$event.stopPropagation()"
[attr.data-tooltip]=""#"+task.id"
>
<div class="tooltip" [attr.id]="task.id">
XXX
</div>Here is the screenshot from Chrome DevTools:
https://imgur.com/a/85yB8S7
Is this a known bug? Any help would be appreciated!
Replies (5)
Connect with tomorrow's innovation leaders as you
[discover new startups on DualMedia News]( profiling groundbreaking companies from early development through global scaling and their potential to redefine established industry landscapes.
Playing online casino games from Canada is a pleasure, especially when you find a platform that really works. After a few days of testing, I can confidently recommend Planet 7 Casino Everything here is clear: from registration to withdrawal. I was also pleasantly surprised by the themed events and VIP program.
Real-world cosmic collisions are simulated by solar smash online sending large asteroids onto planets.
一次性電åç…™(或拋棄 å¼ é›»å è¸â€‹ï¼‰å› 其便æ·æ€§å’Œæ™‚å°šè¨è¨ˆï¼Œè¿…速æˆç‚ºè¨±å¤šå¸è¸è€…與電å煙用戶的首é¸ã€‚一次性å°ç…™
Hi
If the tooltip is being initialized on static elements but not re-initialized when new elements are added dynamically (as happens with *ngFor), then the dynamically created tooltips won't work.
You may need to reinitialize tooltips inside ngAfterViewInit() and after the *ngFor list is updated.
@ViewChildren("tooltipElement") tooltipElements!: QueryList<ElementRef>;
ngAfterViewInit(): void {
this.initializeTooltips();
}
initializeTooltips(): void {
setTimeout(() => {
// Manually initialize tooltip, assuming uses a global function
$("[data-tooltip]").each(function () {
// Reinitialize your tooltip here:
$(this).tooltip();
});
}, 100);
}Thanks
