*ngFor中的Mat工具提示

使用材质提供的特性显示/隐藏工具提示并管理这些提示的位置。一次单击即可显示/隐藏所有工具提示 @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>

See code on StackBlitz

使用 @ViewChildren 获取对所有工具提示的引用。要取消工具提示的默认“行为”,请设置“禁用” matTooltipDisabled 属性。该属性值应通过单击按钮或 mousemove 在 input 关注工具提示或包装 div 。 在显示工具提示之前,您还需要一个超时来计数器时钟AM超时。

类型脚本:

import { ViewChildren } from '@angular/core';
...
@ViewChildren('tooltip') tooltips;
...
  showAllTooltips() {
    this.show = !this.show;
    if (this.show) {
      setTimeout(() => {
        this.tooltips._results.forEach(item => item.show())
      }, 5); tooltip pop
    } else {
        this.tooltips._results.forEach(item => item.hide());
    }
  }

HTML :

<div (mousemove)="show=false" *ngFor="let item of items; let i=index">
    <mat-form-field [matTooltipDisabled]="!show" matTooltip="{{item.comment}}" #tooltip="matTooltip">
        <input matInput>
    </mat-form-field>
</div>
<button mat-raised-button (click)="showAllTooltips()"> Show / hide all tooltips </button>

DEMO