垫工具提示在材料列表项内不起作用答案

【问题标题】：Mat tooltip not working inside of material list-item垫工具提示在材料列表项内不起作用
【发布时间】：2022-11-03 03:36:20
【问题描述】：

我的垫子工具提示未显示在垫子列表项中。我做了以下事情：

添加了 MatTooltipModule 和 BrowserAnimationsModule

尝试创建一个类以将工具提示放在其他元素的前面。

这是代码：

<mat-accordion mat-list-option>
  <mat-expansion-panel [togglePosition]="'before'">
    <mat-expansion-panel-header>
      <mat-icon [svgIcon]="'heroicons_outline:user-group'"></mat-icon>
      <mat-panel-title>Channel members</mat-panel-title>
    </mat-expansion-panel-header>
    <mat-nav-list>
      <mat-list-item *ngFor="let users of currentUsers" mat-menu-item>
        <mat-icon
          class="items-begin relative"
          [svgIcon]="'heroicons_outline:user'"
          ><span
            class="absolute left-5 bottom-4 h-2 w-2 rounded-full"
            matTooltip="Show something!"
            matTooltipPosition="left"
            [ngClass]="{
              'bg-green-500': users.data.status === 'active',
              'bg-amber-500': users.data.status === 'pending',
              'bg-red-500': users.data.status === 'rejected'
            }"
          ></span
        ></mat-icon>
        {{ users.data.displayName }}
      </mat-list-item>
    </mat-nav-list>
  </mat-expansion-panel>
</mat-accordion>

有人知道如何解决这个问题吗？

【问题讨论】：

标签： angular angular-material tooltip

【解决方案1】：

嘿，欢迎来到 Stack Overflow！

我想我至少让你更接近解决方案。我相信您的问题只是标签和属性不匹配。我将matMenuItem 更改为matListItem，并将mat-nav-list 更改为mat-list。我也花了很多时间来获得一个最小可重复的例子，但我希望这至少能让你到达你需要去完成它的地方！

我在这里为您准备了模板和组件文件，但我也鼓励您查看我用来获取此解决方案的 stackblitz。我鼓励你分叉它并根据你的具体例子来做你需要的

import { Component } from '@angular/core';
import { TooltipPosition } from '@angular/material';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'basictooltip',
  templateUrl: 'basictooltip.html',
})
export class BasicTooltip {
  public currentUsers = [
    {
      data: {
        status: 'active',
        displayName: 'Ricky Bobby',
      },
    },
    {
      data: {
        status: 'active',
        displayName: 'Ricky Bobby',
      },
    },
    {
      data: {
        status: 'active',
        displayName: 'Ricky Bobby',
      },
    },
    {
      data: {
        status: 'active',
        displayName: 'Ricky Bobby',
      },
    },
  ];
}

<mat-accordion mat-list-option>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-icon></mat-icon>
      <mat-panel-title>Channel members</mat-panel-title>
    </mat-expansion-panel-header>
    <mat-list>
      <mat-list-item
        *ngFor="let users of currentUsers"
        matListItem
        class="absolute left-5 bottom-4 h-2 w-2 rounded-full"
        matTooltip="Show something!"
        matTooltipPosition="above"
      >
        {{ users.data.displayName }}
      </mat-list-item>
    </mat-list>
  </mat-expansion-panel>
</mat-accordion>

正如所承诺的那样，这里是堆栈闪电战，可以用来玩这个，让它成为你需要的https://angular-tooltip-material-6synxp.stackblitz.io

【讨论】：