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
