show Tooltip only when the ellipsis is active

Question

HTML:

<td mat-cell [attr.id]="hospital.organizational_id + '_hospitalname'" 
    *matCellDef="let hospital">
    <div id="hospital_name" class="truncate" 
        [matTooltip]="hospital.organization_name.length > 32 ? 
        hospital.organization_name: '' ">
        {{hospital.organization_name}}
    </div>
</td>

CSS:

.truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block !important;
}

I want a tool-tip to be displayed dynamically purely depending on the ellipsis.But the problem is tool-tip displayed but it is also getting displayed for the data which doesn't have ellipsis.I'm using angular-material

I have written some CSS after referring some sites

The expected behaviour is should get tool-tip only for the data which has ellipsis otherwise it should be hidden and u can see I'm using angular material.

I have seen some solutions with jquery and it doesn't work for me. Is there a way to solve this?

Thanks in advance

Answer 1

Based on the Romain Deneau answer I created a small directive

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

  public ngOnInit(): void {
    // Wait for DOM update
    setTimeout(() => {
      const element = this.elementRef.nativeElement;
      this.matTooltip.disabled = element.scrollWidth <= element.clientWidth;
    });
  }
}

You can use it a little bit easier

<td mat-cell [attr.id]="hospital.organizational_id + '_hospitalname'" *matCellDef="let hospital">
  <div id="hospital_name" class="truncate" [matTooltip]="hospital.organization_name" appShowIfTruncated>
    {{hospital.organization_name}}
  </div>
</td>

Answer 2

Another improvement; Egor's answers is beautiful but unfortunately ngOnInit might not be enough. Examples:

• When the element surrounding [matTooltip] is resizeable
• When the text itself can be changed dynamically
• When CSS selectors change the element padding/font-weight/font-size etc. and as a result truncates the text after initiation

Therefor the result is to bind to mouseenter (At that point, setTimeout becomes redundant):

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

@Directive({
  selector: '[matTooltip][showIfTruncated]'
})
export class ShowIfTruncatedDirective {
  
  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;
  }
}