CODEWITHSUNDEEP
angular
Ravi Aryan
Ravi Aryan

Reputation: 21

Tooltip for truncated text in Angular 2

I m working on Angular 2 nd, I created one tooltip that has to open for only truncated text but now it is opening for both truncated text and normal text. So i want to put logic that it will open only on truncated text. ![enter image descrip

Upvotes: 2

Views: 2203

Answers (1)

Guerric P
Guerric P

Reputation: 31815

You can have a reference on your wrapping div with @ViewChild('yourDiv') yourDiv: ElementRef, that probably has the following CSS:

width: ...px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Then compare clientWidth and scrollWidth with the following expression : this.yourDiv.nativeElement.scrollWidth > this.yourDiv.nativeElement.clientWidth

Use this expression to conditionnally display your tooltip

Upvotes: 1

Related Questions