javascript - How to show Angular Material Tooltip on component initialization - Stack Overflow

I want to show an Angular Material tooltip when its ponent 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 ponent loads, then hide after a few seconds.

I've tried the following:

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

I want to show an Angular Material tooltip when its ponent 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 ponent loads, then hide after a few seconds.

I've tried the following:

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

• javascript
• angular
• angular-material

Share Improve this question Follow edited Jan 28, 2019 at 21:23 possum_pendulum asked Jan 28, 2019 at 21:13 possum_pendulumpossum_pendulum 17911 gold badge44 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

Try this:

@ViewChild('tooltip') tooltip: MatToolTip;

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