代码之家 › 专栏 › 技术社区 › Maciej Wojcik

*ngFor中的Mat工具提示

angular-material2 angular-material angular

Maciej Wojcik · 技术社区 · 8 年前

如何动态显示和隐藏材质设计工具提示? 我有一个显示工具提示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的多个工具提示?

2 回复 | 直到 8 年前

Todd 6 年前

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

Vega Stipe 8 年前

使用 @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