tooltip popup is not showing in nz-tabs

I have two tabs where I want to add an info icon before the tab text. Hovering over the icon should display a tooltip popup.

i have tried two ways here , using different approaches but none worked out

     <nz-tabset [nzLinkRouter]="true">
              <nz-tab >
                <a [nzTooltipOverlayClassName]="'tooltip-md'" *nzTabLink nz-tab-link nz-tooltip [nzTooltipTitle]="'This list represents your focus group of recruits, you can add an agent to your recruiting targets list from a list or detailed view. you can remove them by selecting the checkbox and clicking the Remove Target(s) button below'"  [routerLink]="['.']">
                <span nz-icon nzType="info-circle" nzTheme="fill" style="font-size: 19px;"></span>
                 My Recruiting Targets
                </a>
                <recruiting-targets></recruiting-targets>
              </nz-tab> 

              <nz-tab > 
                <a  *nzTabLink nz-tab-link nz-tooltip [routerLink]="['.']" [queryParams]="{ type: 'retention' }"
                  queryParamsHandling="merge"> 
                  <span nz-tooltip  [nzTooltipOverlayClassName]="'tooltip-md'" [nzTooltipTitle]="'This list represents your focus group of your agents for retention, you can add an agent to your retention targets list from a list or detailed view, the Portal knows when it’s one of your agents and will automatically add them to your Retention Targets. You can remove them by selecting the checkbox and clicking the Remove Target(s) button below'"  >
                  <span nz-icon nzType="info-circle" nzTheme="fill" style="font-size: 19px;"></span>
                </span>
                  My Retention Targets
                </a>
              <retention-targets></retention-targets>
            </nz-tab>
</nz-tabset>

how do i have tooltip popup only on hovering over tool icon ?

Solution

You should wrap the icon with the tooltip and place the tooltip on the icon itself. This way, the tooltip will only be triggered when the icon is hovered over, not the entire tab.

<nz-tabset [nzLinkRouter]="true">
 <nz-tab>
   <a [nzTooltipOverlayClassName]="'tooltip-md'" *nzTabLink nz-tab-link [routerLink]="['.']">
     <span nz-icon nzType="info-circle" nzTheme="fill" style="font-size: 19px;" nz-tooltip [nzTooltipTitle]="'This list represents your focus group of recruits, you can add an agent to your recruiting targets list from a list or detailed view. you can remove them by selecting the checkbox and clicking the Remove Target(s) button below'">
     </span>
     My Recruiting Targets
   </a>
   <recruiting-targets></recruiting-targets>
 </nz-tab> 

 <nz-tab> 
   <a *nzTabLink nz-tab-link [routerLink]="['.']" [queryParams]="{ type: 'retention' }" queryParamsHandling="merge"> 
     <span nz-icon nzType="info-circle" nzTheme="fill" style="font-size: 19px;" nz-tooltip [nzTooltipOverlayClassName]="'tooltip-md'" [nzTooltipTitle]="'This list represents your focus group of your agents for retention, you can add an agent to your retention targets list from a list or detailed view, the Portal knows when it’s one of your agents and will automatically add them to your Retention Targets. You can remove them by selecting the checkbox and clicking the Remove Target(s) button below'">
     </span>
     My Retention Targets
   </a>
   <retention-targets></retention-targets>
 </nz-tab>
</nz-tabset>

Edit

The problem is due to the way the nz-tooltip directive works. It might not work as expected when it is applied to an element that is not a button or a link.

<a *nzTabLink nz-tab-link [routerLink]="['.']">
 <button nz-button nzType="link" style="border: none; background: none; padding: 0;">
   <span nz-icon nzType="info-circle" nzTheme="fill" style="font-size: 19px;" nz-tooltip [nzTooltipOverlayClassName]="'tooltip-md'" [nzTooltipTitle]="'This list represents your focus group of recruits, you can add an agent to your recruiting targets list from a list or detailed view. you can remove them by selecting the checkbox and clicking the Remove Target(s) button below'"></span>
 </button>
 My Recruiting Targets
 <recruiting-targets></recruiting-targets>
</a>