overflow directive always disabled [Workaround Available]

SomeStudent 0
Viewed 27

Original:

I am having a hard time getting my matTooptip directive to work properly in the case of when using a mat-select element. The issue is that no matter what, even if ellipsis is present, the tooptip is always disabled. This directive, btw, works fine for

My directive looks as follows

import { Directive, ElementRef, HostListener, OnInit } from '@angular/core';
import { MatTooltip } from '@angular/material/tooltip';

@Directive({
  selector: '[tooltipIfEllipsis]'
})
export class TooltipIfEllipsisDirective {

  constructor( 
    private matTooltip: MatTooltip,
    private elementRef: ElementRef<HTMLElement>) { }
    @HostListener('mouseenter', ['$event'])
    setTooltipState(): void {
        const element = this.elementRef.nativeElement;
        this.matTooltip.disabled = (element.scrollWidth <= element.clientWidth &&  element.clientHeight >= element.scrollHeight);
    }


}

Every time I hover over my mat-select, which is defined as follows, the directive is always evaluating to true. How can I make this directive work with a mat-select, or is there a different way to check for ellipsis?

<mat-select 
        class="dropdown-select"
        [(value)]="sessionTypeId" 
        (selectionChange)="onDropdownChange($event)"
        matTooltip=""
        defaultTooltip="'No assigned session types for this coach'"
        conditionalMatTooltip
        [conditionalTooltip]="selectedSessionType?.Name + ' - ' + selectedSessionType?.Length + ' Minutes'"
        [conditionMet]="sessionTypes.length > 0"
        tooltipIfEllipsis
        placeholder="'Select a session type'"
        name="sessionTypes">
        <mat-select-trigger *ngIf="sessionTypes.length == 0">
            <span [ngStyle]="{ 'color': '#2199E8' }">Select a session type</span>
        </mat-select-trigger>
        <mat-option style="color: #2199E8" *ngIf="sessionTypes.length == 0" [value]="'N/A'">
            Select a session type
        </mat-option>
        <mat-option *ngFor="let c of sessionTypes" [value]="c.Id" [matTooltip]="c.Name + ' - ' + c.Length + ' Minutes'" tooltipIfEllipsis>
            {{c.Name}} - {{c.Length}} Minutes
        </mat-option>
    </mat-select>
angular
1 Answers

Found an interesting work around, so from what I gather applying a mattool tip like in the original directive to a mat-select is actually not quite possible due to how it is implemented.

However, if we consider that a VERY rough guesstimate of char to pixel is {fontSize}/2. Then we can come to the following new directive instead:

@Directive({
  selector: '[tooltipRoughPixelGuess]'
})
export class TooltipRoughPixelGuess {

  constructor( 
    private matTooltip: MatTooltip,
    private elementRef: ElementRef<HTMLElement>) { }

    @HostListener('mouseenter', ['$event'])
    setTooltipState(): void {
        const element = this.elementRef.nativeElement;
        const roughCharToPixel = Math.ceil(15/2);
        this.matTooltip.disabled = element.textContent.length * roughCharToPixel < this.elementRef.nativeElement.offsetWidth
    
        if(!this.matTooltip.disabled && this.matTooltip.message == "") {
          this.matTooltip.message = element.textContent;
        }
    }
}

This appears to work well in my use cases so far. It is not an ideal solution, but as engineers sometimes we need to settle for good enough.

SomeStudent0
Related