Question

如何动态显示和隐藏材料设计工具提示？我有组件显示工具提示int * ngFor

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

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

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

 <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

使用Material提供的属性显示/隐藏工具提示并管理这些提示的位置。使用@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

Answer 2

使用@ViewChildren获取对所有工具提示的引用。取消默认行为＆＃39;工具提示，设置禁用属性的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

* ng

2 个答案: