matTooltip performance issue

Bug:

When mouse hover event occurred on one of the matTooltip component, it causes reevaluation of all matTooltip components in a page. This only applies to matTooltips using a dynamic expression or a function.

What is the expected behavior?

Only the tooltip getting the mouse hover event should get reevaluated.

What is the current behavior?

All tooltips on the current view are getting evaluated regardless of whether they received hover event or not.

What are the steps to reproduce?

<button mat-raised-button [matTooltip]="test()">
  Action 1
</button>
<button mat-raised-button [matTooltip]="test()">
  Action 2
</button>

  public test() {
    console.log('test');
    return 'test';
  }

What is the use-case or motivation for changing an existing behavior?

We have a table/list with 1000 rows and each one of them have dynamic tooltip content. This bug prevents us from using tooltips on that view.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: Angular Material: 5.x TypeScript: 2.5.3 NPM: 6.4.0 Node: 6.11.5 Browsers: Chrome OS: Windows

[karan-kang]

I don’t think change detection for other tooltips on the page should get fired if they were not hovered.

The tooltip content is shown inside an overlay, if none of the other tooltips will be visible, why do we need to re-evaluate them?

[crisbeto]

This is how data binding works in general. All of the expression on the page will be re-evaluated when an event occurs.