Add Tooltip When Ellipsis Directive to Angular Material Select

Question

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.

Answer 1

tooltip is not showing because the mat-option don't actually receive focus, but it's simulated focus using aria-activedescendant. this issue was raised in github(LINK), looks like they not gonna change this behaviour.

Answer 2

I am using ngbTooltip in my case. You can refer this: this is HTML Code

<tr *ngFor="let parameter of params">
<td placement="bottom" tooltipClass="paramTooltip" container="body"  [ngbTooltip]="parameter.parameterCaption">{{parameter.parameterCaptionDisplay}}</td>
</tr>

Back end is here

for(const param of params){
if ( param.parameterCaption.length > 30) {
      param.parameterCaptionDisplay =  param.parameterCaption.substring(0, 27) + '...';
    }else{
      param.parameterCaptionDisplay =  param.parameterCaption;
    }
}

This is how you can customize input to your material options also.

Answer 3

You can make matTooltip work on mat-option by using some extra css.

This enable focus on the custom element mat-option and toolip will show up.

::ng-deep{
    mat-option {
        display: inline-block;
        width: 100%;
    }
}