Add Tooltip When Ellipsis Directive to Angular Material Select

I'm working in an Angular 9 project, and I have a directive that will add a matTooltip if the element is truncated (if the element's text is too long and it's overflow ends in ellipsis).

The directive works fine with all the elements I've been using, until I added a material select. Some options in my material select will have long names, and by default material select sets a max width size and overflows text with ellipsis if too long. However, I also want users to be able to view the full option name with a tooltip.

The issue is that the directive doesn't work when I add it to the mat-option element. A tooltip will never show even if it's being truncated. My guess if I'm adding it to the wrong element, and mat-option isn't what is being truncated. But I'm unsure which element is and how to add my directive to it.

Here's a stackblitz deminng the issue: https://stackblitz.com/edit/tooltip-if-truncated-directive-issue-with-matselect?file=src/app/app.component.html

Here's my tooltip directive:

@Directive({
  selector: "[matTooltip][appTooltipIfTruncated]"
})
export class TooltipIfTruncatedDirective implements OnInit {
  constructor(private matTooltip: MatTooltip, private elementRef: ElementRef<HTMLElement>) {}

  public ngOnInit(): void {
    // Wait for DOM update
    setTimeout(() => {
      console.log("tooltip dir", this.elementRef.nativeElement);
      const element = this.elementRef.nativeElement;
      console.log(
        "tooltip dir. scroll: ",
        element.scrollWidth,
        "\t client: ",
        element.clientWidth,
        "result: ",
        element.scrollWidth <= element.clientWidth
      );
      this.matTooltip.disabled = element.scrollWidth <= element.clientWidth;
    });
  }
}

And here's how I use it with most elements (and it works):

<p [matTooltip]="'test'" appTooltipIfTruncated>This is a test.</p>

And here's how I'm adding it to a material select's options (doesn't work):

<mat-select [formControl]="selectedCountryControl" placeholder="Country">
  <mat-option *ngFor="let opt of opts" [value]="opt" [matTooltip]="'test'" appTooltipIfTruncated>{{opt}}</mat-option>
</mat-select>

I'm also unsure if there's another way to do this with material select/option (without a directive), I'm open to any ways that will give the functionality of having a tooltip when the text is too long and is truncated to my material options.

Thanks for any help you can give.