tooltip.ts

@Directive({
 selector: '[tooltip]'
})
class TooltipDirective {
  @Input() tooltip;
  private _tooltipEle;
 
  constructor(private el: ElementRef) {}
  
  ngAfterContentInit() {
    this._tooltipEle = $(`<div class="tooltip">${this.tooltip}<div class="tooltip-arrow"></div></div>`).appendTo( "body" );
    this._createTooltip();
  }

  @HostListener("mouseover")
  showTooltip() {
   this.toggleTooltip();
  }
  
  @HostListener("mouseout")
  removeTooltip() {
    this.toggleTooltip();
  }
  
  private _createTooltip() {
    // create tooltip...
  }
  
  toggleTooltip() {
    this._tooltipEle.toggleClass("tooltip-show")
  }
}