title: Add Tooltip When Ellipsis Directive to Angular Material Select
body: <p>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).</p>
  <p>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.</p>
  <p>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.</p>
  <p>Here's a stackblitz deminng the issue: <a href="https://stackblitz.com/edit/tooltip-if-truncated-directive-issue-with-matselect?file=src/app/app.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/tooltip-if-truncated-directive-issue-with-matselect?file=src/app/app.component.html</a></p>
  <p>Here's my tooltip directive:</p>
  <pre><code>@Directive({
    selector: &quot;[matTooltip][appTooltipIfTruncated]&quot;
  })
  export class TooltipIfTruncatedDirective implements OnInit {
    constructor(private matTooltip: MatTooltip, private elementRef: ElementRef&lt;HTMLElement&gt;) {}
  
    public ngOnInit(): void {
      // Wait for DOM update
      setTimeout(() =&gt; {
        console.log(&quot;tooltip dir&quot;, this.elementRef.nativeElement);
        const element = this.elementRef.nativeElement;
        console.log(
          &quot;tooltip dir. scroll: &quot;,
          element.scrollWidth,
          &quot;\t client: &quot;,
          element.clientWidth,
          &quot;result: &quot;,
          element.scrollWidth &lt;= element.clientWidth
        );
        this.matTooltip.disabled = element.scrollWidth &lt;= element.clientWidth;
      });
    }
  }
  </code></pre>
  <p>And here's how I use it with most elements (and it works):</p>
  <pre><code>&lt;p [matTooltip]=&quot;'test'&quot; appTooltipIfTruncated&gt;This is a test.&lt;/p&gt;
  </code></pre>
  <p>And here's how I'm adding it to a material select's options (doesn't work):</p>
  <pre><code>&lt;mat-select [formControl]=&quot;selectedCountryControl&quot; placeholder=&quot;Country&quot;&gt;
    &lt;mat-option *ngFor=&quot;let opt of opts&quot; [value]=&quot;opt&quot; [matTooltip]=&quot;'test'&quot; appTooltipIfTruncated&gt;{{opt}}&lt;/mat-option&gt;
  &lt;/mat-select&gt;
  </code></pre>
  <p>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.</p>
  <p>Thanks for any help you can give.</p>