Not able to disable mat tooltip from custom directive for short text

Question

I have list text on the page which vary in length, so for the long text i'm showing ellipse. To view the complete text i'm using mat tooltip. As its a generic component even for short text which is completely visible also tooltip is shown. For hiding the tooltip im using matTooltipDisabled property with value comparing scrollWidth and clientWidth of that element which works fine. But I need hide short text tooltip across the application so tried to make a custom directive which will do scrollWidth and clientWidth comparison and set matTooltipDisabled as true/false, But this is setting the property in dom but tooltip is not getting disabled. So need help with making this custom directive or finding a generic way to manage tooltip.

Style for showing ellipse

.row{
  display: block;
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

Managing visibility by inline matTooltipDisabled with scrollWidth and clientWidth comparison. Which is working as exepected.

<span #short [matTooltipDisabled]="(short.scrollWidth <= short.clientWidth)" class="row" [matTooltip]="shortText">{{shortText}}</span>
<span #long [matTooltipDisabled]="(long.scrollWidth <= long.clientWidth)" class="row" [matTooltip]="longText">{{longText}}</span>

Directive way:

import { Directive, ElementRef, HostBinding } from '@angular/core';

@Directive({
  selector: '[appTooltipControl]'
})
export class TooltipControlDirective {

  private element!: HTMLElement;
  constructor(private ele: ElementRef) {
    this.element = ele.nativeElement
  }

  @HostBinding('attr.matTooltipDisabled') get toolTipDisabled():boolean {
    return this.element.scrollWidth <= this.element.clientWidth
  }
}

Using appTooltipControl in HTML

<span appTooltipControl class="row" [matTooltip]="shortText">{{shortText}}</span>
<span appTooltipControl class="row" [matTooltip]="longText">{{longText}}</span>

With directive method, in Dom property is set as true for short text but still tooltip is visible.

When using inline matTooltipDisabled as true/false no such mattooltipdisabled is added in DOM