show Tooltip only when the ellipsis is active

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

Overflow of an element can be detected in JavaScript with this helper, using Angular ElementRef and a formula from this answer:

function isTextTruncated(element: ElementRef): boolean {
  const e = element.nativeElement;
  return e.scrollWidth > e.clientWidth;
}

Then, in your component, use it referencing the element with a “@ViewChild” property:

  @ViewChild('hospitalName') hospitalNameElement: ElementRef;

  isHospitalNameTruncated(): boolean {
    return isTextTruncated(this.hospitalNameElement);
  }

Finally, in the template, add the identifier #hospitalName and call isHospitalNameTruncated() to customize the tooltip text:

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