Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide Angular 2 material tooltip like ngIf

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>
like image 355
Patrik Laszlo Avatar asked Feb 26 '17 15:02

Patrik Laszlo


People also ask

How to hide tooltip in Angular?

matTooltipDisabled is used to disable tooltips in Angular. Using this we can conditionally show the tooltip. We can dynamically change the [matTooltipDisabled] input property by binding to a variable.

What is matTooltipClass?

@Input('matTooltipClass') tooltipClass: any. Classes to be passed to the tooltip. Supports the same syntax as ngClass .


3 Answers

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>
like image 170
DKMudrechenko Avatar answered Sep 27 '22 20:09

DKMudrechenko


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>
like image 28
SuprakashMukherji Avatar answered Sep 27 '22 20:09

SuprakashMukherji


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.

like image 40
Eray T Avatar answered Sep 27 '22 18:09

Eray T