How do I show a popover on an element that is dynamically inserted into HTML?

[ArunVenkata]

in the following html

<div id="outer">
    <p id="xyz"></p>
<div>

The element <p id="xyz"> will be dynamically inserted into the div with class outer based on certain conditions which change in realtime.

How do we show a tooltip with content on hovering over the <p> tag?

Note: The dynamically inserted <p> tag will also have an id which would determine the content of the said Popover. For example: if it is <p id="user-1"></p> the popover should show the name of a certain User-1. The information about the user will come from an api. for User-2 the name could be different hence the content of the popover should change based on the id.

Thanks in advance!

[Edgar-Chmylko-WE]

You shoud be able to declare a variable in NzTooltipTitle. For example
<div *ngFor="let user of users">
<p nz-tooltip [NzTooltipTitle]="user.id"> {{ user.name }} </p>
</div>

I hope this helps :)