Question

在Angular 1 Material中我可以使用一个指令，现在它是一个属性，现在很难做到。我该怎么做只是为了只显示工具提示，就像页面宽度小时一样隐藏它？

我找不到。它不可能像：

<md-tooltip ngIf="false">sometimes hidden</md-tooltip>

Answer 1

如果我正确理解您的请求，您只想在满足某个条件时显示工具提示，请尝试以下操作：

<div [mdTooltip]="isWide ? 'Visible' : null"></div>

Answer 2

你可以这样做

<button mat-raised-button color="primary" [matTooltip]="test ? 'You must complete all the required fields.' : null" matTooltipPosition="above">Primary</button>

如果您想在错误时显示工具提示，只需将null替换为您的文字。

Answer 3

我做了以下指令，仅当文本大于包含元素时，才显示工具提示。

我扩展了MatTooltip类来创建自己的自定义指令。

此伪指令侦听其附加元素上的mouse enter事件。然后，仅当文本大小超过元素大小时，才启用工具提示。

import { Directive, ElementRef, HostListener, Inject, Input, NgZone, Optional, ViewContainerRef } from '@angular/core';
import {
    MAT_TOOLTIP_DEFAULT_OPTIONS,
    MAT_TOOLTIP_SCROLL_STRATEGY,
    MatTooltip,
    MatTooltipDefaultOptions
} from '@angular/material';
import { AriaDescriber, FocusMonitor } from '@angular/cdk/a11y';
import { Directionality } from '@angular/cdk/bidi';
import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
import { Platform } from '@angular/cdk/platform';

@Directive({
  selector: '[appToolTip]'
})



export class ToolTipDirective extends MatTooltip {

  @Input()
  get appToolTip() {
      return this.message;
  }
  set appToolTip(txt: string) {
    this.message = txt;
  }


  constructor(private el: ElementRef,
    _overlay: Overlay,
    _scrollDispatcher: ScrollDispatcher,
    _viewContainerRef: ViewContainerRef,
    _ngZone: NgZone,
    _platform: Platform,
    _ariaDescriber: AriaDescriber,
    _focusMonitor: FocusMonitor,
    @Inject(MAT_TOOLTIP_SCROLL_STRATEGY) _scrollStrategy: any,
    @Optional() _dir: Directionality,
    @Optional() @Inject(MAT_TOOLTIP_DEFAULT_OPTIONS)
    _defaultOptions: MatTooltipDefaultOptions
    ) {

      super(
      _overlay,
       el,
      _scrollDispatcher,
      _viewContainerRef,
      _ngZone,
      _platform,
      _ariaDescriber,
      _focusMonitor,
      _scrollStrategy,
      _dir,
      _defaultOptions
  );
}

  @HostListener('mouseenter')
  check(): void {
    this.disabled = (this.el.nativeElement.offsetWidth < this.el.nativeElement.scrollWidth) ?  false :  true;
  }

}

只需将指令附加到元素上即可：

<td [appToolTip] = "someTxtString"> {{someTxtString}} </td>

Answer 4

如果要有条件地隐藏元素，可以使用* ngIf或隐藏。实施例

<div *ngIf="someVariable">content</div>   // if someVariable if true, will display

<div [hidden]="someVariable">content</div>   // if someVariable is true, will hide

Answer 5

matTooltipDisabled用于禁用Angular中的工具提示。使用此工具，我们可以有条件地显示工具提示。

 <button mat-raised-button matTooltip="Disable tooltip" matTooltipDisabled="true">
    Disable tooltip
 </button>

我们可以通过绑定到变量来动态更改[matTooltipDisabled]输入属性。

 <button mat-raised-button matTooltip="Disable tooltip [matTooltipDisabled]="isDisabled">
    Disable tooltip
 </button>

如果要更改工具提示的颜色和其他CSS属性，

<button mat-raised-button matTooltip="Adding a custom class to the tooltip" matTooltipClass="mat-tooltip">
    Custom tooltip
</button>

css文件如下

 ::ng-deep   .mat-tooltip{
    color: #3E474B !important;
    background-color:#FCFCFC !important;
    border-color: rgb(197, 197, 197);
    font-size: 14px !important;
  }

隐藏Angular 2材质工具提示，如ngIf

5 个答案: