如何在组件初始化时显示Angular Material Tooltip

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>

Answer 1

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.

Answer 2

Try this:

@ViewChild('tooltip') tooltip: MatToolTip;

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