Material 2 Call Tooltip show Method

Question

I am trying to figure out to call the show and hide methods on Material 2 Tooltip so that I can force the tool tip to show or hide it based on some condition in the component.

I have tried using @ViewChild to get a reference to the directive but I must be doing something wrong.

Template snippet :

<button md-mini-fab color="primary" mdTooltip="Menu" [mdMenuTriggerFor]="menu" class="remove-record">
  <md-icon color="white">view_headline</md-icon>
  </button>

Component Snippet:

export class RackAverageComponent implements OnInit {
    @ViewChild(MdTooltip) save;

    ngOnInit() {
       this.save.show();
   }
}

It seems like the directive in the template isn't getting associated with the component. Not sure if I am using @ViewChild correctly.

Answer 1

You need to give an id to tooltip.

Change your template to this:

<button md-mini-fab color="primary" 
              #tooltip="mdTooltip" [mdTooltip]="'Menu'" 
              [mdMenuTriggerFor]="menu" class="remove-record">
  <md-icon color="white">view_headline</md-icon>

... and acces the tooltip using ViewChild and display after view is initialized:

@ViewChild('tooltip') tooltip:MdTooltip;

ngAfterViewInit() {
    this.tooltip.show ();
}