Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

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!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


一次性電子煙(或拋棄 式 電子 菸​)因其便捷性和時尚設計,迅速成為許多吸菸者與電子煙用戶的首選。一次性小煙



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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(