I created a directive responsible for truncating text and enabling the tooltip only if the text overflow its container. Problem is the text inside the tooltip is also truncated and of course I want to avoid this. I can apply the style locally but I am wondering if I can do this programmatically in the directive. I tried this, but it's not working.
@Directive({
selector: '[showEllipsisAndTooltip]'
})
export class ShowEllipsisAndTooltipDirective implements OnInit {
constructor(
private elementRef: ElementRef,
private renderer: Renderer2,
@Optional() private matTooltip: MatTooltip,
) {
}
ngOnInit() {
( more code here )
this.toggleTooltip();
}
private toggleTooltip() {
this.matTooltip.tooltipClass = "{'overflow-wrap': 'break-word'";
this.matTooltip.disabled = this.domElement.scrollWidth <= this.domElement.clientWidth;
}
}
}