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>
<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>
ä¸æ¬¡æ§é»åç (æææ£ å¼ é»å è¸âï¼å å ¶ä¾¿æ·æ§åæå°è¨è¨ï¼è¿ éæçºè¨±å¤å¸è¸è èé»åç ç¨æ¶çé¦é¸ãä¸æ¬¡æ§å°ç
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);
}