0
votes

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;
    }
  }
}