Question

我一直在尝试在选项卡上添加工具提示，但似乎无法添加它。我正在使用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>

Answer 1

Working Demo

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

Answer 2

<mat-tab-group color="primary">
     <mat-tab> 
        <ng-template mat-tab-label>
           <label matTooltip="see 1st tab"> 
               First
           </label>
        </ng-template>
        <div class="mat-mt-2">
            <h2 class="mat-text-warn">first tab</h2>
            <p>Lorem ipsum dolor sit amet elit.</p>
        </div>
     </mat-tab>
</mat-tab-group>

将工具提示贴在标签标签上

2 个答案: