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 (1)
Deleted comment
Deleted comment
Deleted comment
Deleted comment
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
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
