时间戳

首页 > 解决方案 > 在 mat-tab 标签上附加工具提示

angular - 在 mat-tab 标签上附加工具提示

问题描述

我一直在尝试在选项卡上添加工具提示，但似乎无法添加它。我正在使用 matTooltip，但在悬停时没有任何反应。看过有关 stackoverflow 的文档和其他问题，但似乎无法确定问题的根本原因。

有什么我想念的吗？提前致谢。

   <mat-tab-group (selectedTabChange)="toggleUserType($event)">
            <mat-tab label="Users" class="labelHeading" >
            </mat-tab>
            <mat-tab label="Bounced Users " class="labelHeading" matTooltip="See Pictures">
            </mat-tab>
          </mat-tab-group>

标签： angular

解决方案

工作演示

添加ng-template：

<ng-template mat-tab-label>
    <label  class="labelHeading" matTooltip="See Pictures"matTooltipClass="example-tooltip-red1">Bounced Users  
    </label>
</ng-template>

试试这样：

<mat-tab-group (selectedTabChange)="toggleUserType($event)">
    <mat-tab label="Users" class="labelHeading">
    </mat-tab>
    <mat-tab label="Bounced Users " class="labelHeading" matTooltip="See Pictures">
        <ng-template mat-tab-label>
            <label  class="labelHeading" matTooltip="See Pictures"matTooltipClass="example-tooltip-red1">Bounced Users  </label>
        </ng-template>
    </mat-tab>
</mat-tab-group>

推荐阅读