tooltip popup is not showing in nz-tabs

Issue

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.

For the first tab, I added the tooltip to the anchor tag. As a result, the tooltip popup appears when hovering over both the tab text and the icon. However, the requirement is for the tooltip to only appear when hovering over the icon.

In the second tab, the icon is added correctly, but the tooltip popup is not appearing.

     <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>

suggest me some way that tooltip popup will come 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>

Answered By - Keyboard Corporation