Question

43

show Tooltip only when the ellipsis is active

rated 0 times [ 47] [ 4] / answers: 1 / hits: 15936 / 5 Years ago, tue, july 30, 2019, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

chazw

Add To Favorites

Follow

Total Points: 127

Total Questions: 129

Total Answers: 92

Location: Sao Tome and Principe

Member since Wed, Dec 21, 2022

1 Year ago

answered 5 Years ago jimmieo · Accepted 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>