Hide Angular 2 material tooltip like ngIf
Solution 1
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>
Solution 2
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.
Solution 3
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>
![Patrik Laszlo](https://lh4.googleusercontent.com/-CbWT96COjjA/AAAAAAAAAAI/AAAAAAAAQkE/-Ce5kP4qNW0/photo.jpg?sz=256)
Patrik Laszlo
Just my life is all about coding, hacking, servers and distributed systems.
Updated on June 07, 2022Comments
-
Patrik Laszlo about 2 years
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>
-
Patrik Laszlo over 7 yearssorry for helping. i just need for md-tooltip, which is an attribute. to keep the text, but hide the tooltip, weird.
-
Joshua Ohana over 7 yearsI 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
-
Yurii Bratchuk over 6 yearsActual for Angular 5, just need to replace mdTooltip to matTooltip