How to show Angular Material Tooltip on component initialization

Question

I want to show an Angular Material tooltip when its component is initialized/loaded.

I know I can add an HTML attribute to show it when an event happens. My overall goal is to have the tooltip showing when the component loads, then hide after a few seconds.

I've tried the following:

<div (load)="tooltip.show()"
     #tooltip="matTooltip"
     matTooltip="blah blah">
</div>

Amir Arbabian · Accepted Answer · 2019-01-28 22:17:57Z

6

YoukouleleY is almost correct, you need to put it into ngAfterViewInit() and add setTimeout() to make it work:

@ViewChild('tooltip') tooltip: MatTooltip;

constructor(private cd: ChangeDetectorRef) { }

ngAfterViewInit() {
   this.tooltip.show();
   this.cd.detectChanges();
   setTimeout(() => this.tooltip.hide(2000));
}

Added update with changeDetectorRef to avoid ExpressionChangedAfterItHasBeenCheckedError. Hope that helps.

edited Jan 28, 2019 at 22:17

answered Jan 28, 2019 at 21:51

Amir Arbabian

3,7092 gold badges9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

possum_pendulum Over a year ago

That did solve my problem, however it also throws the error:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'zoom: undefined'. Current value: 'zoom: null'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

Amir Arbabian Over a year ago

@possum_pendulum I've updated answer, please check it.

Guerric P · Accepted Answer · 2019-01-28 21:42:44Z

0

Try this:

@ViewChild('tooltip') tooltip: MatToolTip;

ngOnInit() {
  this.tooltip.show();
  this.tooltip.hide(2000);
}

answered Jan 28, 2019 at 21:42

Guerric P

32k6 gold badges61 silver badges109 bronze badges

Collectives™ on Stack Overflow

How to show Angular Material Tooltip on component initialization

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related