15

In Angular 1 Material I could use a directive, right now it is an attribute, right now it is very hard to do. How can I do it simply to only show the tooltip like when the width of page is small and hide when it is big?

I cannot find. It is not possibly to use like:

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

6 Answers 6

31

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>
1
  • 1
    Actual for Angular 5, just need to replace mdTooltip to matTooltip Commented Dec 5, 2017 at 11:05
5

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.

4

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>
0
3

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;
  }
1
  • This is the correct answer in Angular 15. The top two answers didn't work for me. Commented Mar 3, 2023 at 15:44
1

You can use MatTooltip with matTooltipDisabled.

<button [matTooltip]="myText" [matTooltipDisabled]="TooltipBoolean">MyButton</button>
-1

If you want to conditionally hide an element you can use *ngIf or hidden. Example

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

<div [hidden]="someVariable">content</div>   // if someVariable is true, will hide
2
  • 2
    sorry for helping. i just need for md-tooltip, which is an attribute. to keep the text, but hide the tooltip, weird. Commented Feb 28, 2017 at 7:19
  • 1
    I don't understand what you're trying to do. You want the content to appear outside of the tooltip? In that case just throw it in a separate div with an opposite ngIf condition Commented Feb 28, 2017 at 17:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.