像 ngIf 一样隐藏 Angular 2 material 工具提示

Question

在Angular 1 Material中我可以使用指令，现在它是一个属性，现在很难做到。怎样才能简单的让tooltip像页面宽度小的时候显示，页面宽度大的时候隐藏？

我找不到。不可能使用 like:

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

Answer 1

如果你想有条件地隐藏一个元素，你可以使用 *ngIf 或 hidden。示例

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

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

Answer 2

如果我对您的要求理解正确，您希望仅在满足特定条件时显示工具提示，请尝试以下操作：

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

Answer 3

你可以这样做：

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

如果你想在它为 false 时显示工具提示，只需将 null 替换为你的文本即可。

Answer 4

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

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

此指令侦听它所附加的元素上的鼠标输入事件。然后仅当文本大小超过元素大小时才启用工具提示。

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 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;
  }

像 ngIf 一样隐藏 Angular 2 material 工具提示

Hide Angular 2 material tooltip like ngIf

angular

tooltip

angular-material2