nz-tabs中仅hover信息图标时Tooltip弹窗不显示的求助

要实现仅hover信息图标时显示Tooltip，核心是把nz-tooltip指令直接绑定到图标元素上，而不是外层的链接或容器。之前的两种方式问题在于：

• 第一种把tooltip绑定到整个<a>标签，导致hover标签任意区域都会触发弹窗
• 第二种把tooltip绑定到包裹图标的额外<span>，可能因为容器样式问题导致hover触发范围不准确

修改后的代码如下：

<nz-tabset [nzLinkRouter]="true">
  <nz-tab>
    <a *nzTabLink nz-tab-link [routerLink]="['.']">
      <!-- 把nz-tooltip直接绑定到图标span -->
      <span nz-icon nzType="info-circle" nzTheme="fill" style="font-size: 19px; margin-right: 4px;"
            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>
      My Recruiting Targets
    </a>
    <recruiting-targets></recruiting-targets>
  </nz-tab>

  <nz-tab>
    <a *nzTabLink nz-tab-link [routerLink]="['.']" [queryParams]="{ type: 'retention' }" queryParamsHandling="merge">
      <!-- 同样把tooltip绑定到图标span -->
      <span nz-icon nzType="info-circle" nzTheme="fill" style="font-size: 19px; margin-right: 4px;"
            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>

关键说明 #

1. tooltip绑定目标准确：将nz-tooltip指令直接附加到<span nz-icon>元素，确保只有hover图标时才触发弹窗
2. 样式优化：给图标添加margin-right: 4px，让图标和文本保持合适间距，提升交互体验
3. 触发方式明确：虽然nz-tooltip默认触发方式是hover，如果需要可以显式添加nzTooltipTrigger="hover"确保行为符合预期

内容的提问来源于stack exchange，提问作者Asra Fatima