Hide Angular 2 material tooltip like ngIf

You can do it like this:

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

If you want to show the tooltip when it's false, just replace null with your text.

If I understand your request correctly you want to show tooltip only when a certain condition is met, try this:

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

matTooltipDisabled is used to disable tooltips in Angular. Using this we can conditionally show the tooltip.

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

We can dynamically change the [matTooltipDisabled] input property by binding to a variable.

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

If you want to change the color and other css property of the tooltip,

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

css file is as below

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

I made the following directive which shows the tooltip only when the text is larger than the containing element.

I have extened the MatTooltip class to create my own custom directive.

This directive listens for the mouse enter event on the element to which it is attached. It then enables the tooltip only if the size of text exceeds the size of the element.

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

}

Just attach the directive to the element like :

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