*ngFor 中的 Mat-Tooltips

Question

如何动态显示和隐藏 Material Design 工具提示？我有显示工具提示 int *ngFor 的组件

<div *ngFor="let item of items" fxLayout="row">
        <mat-form-field matTooltip="{{item.comment}}">
          <input matInput>
        </mat-form-field>
</div>

我有按钮来处理更改时显示/隐藏工具栏，但如何显示和隐藏这些工具栏？

在文档中有一个使用一个工具栏的示例：

 <button mat-raised-button (click)="tooltip.show()"> Show tooltip </button>

<span matTooltip="This is the tooltip message" #tooltip="matTooltip">
  I have a tooltip
</span>

这很简单，但是如何处理 *ngFor 中的多个工具提示？

Answer 1

使用材质提供的属性来显示/隐藏工具提示并管理这些提示的位置。通过单击即可显示/隐藏所有工具提示@ViewChildren。

<div (mouseover)="tooltipStatus=true" *ngFor="let item of fieldsData; let i=index">
    <mat-form-field 
    [matTooltipDisabled]="!tooltipStatus" 
    matTooltip="{{item.tooltip}}"
    matTooltipPosition='right'
    #tooltip="matTooltip">
    <!-- possible value for position 'above|below|left|right' -->

        <input matInput [value]="item.value">
    </mat-form-field>
</div>

<button mat-raised-button (click)="toggleTooltips()"> Toggle Tooltips </button>

请参阅 StackBlitz 上的代码