tooltip.directive.ts

@Directive({ selector: '[my-tooltip]' })
export class TooltipDirective implements OnDestroy {

  @Input() tooltipTitle: string = '';
  private id: string;

  constructor(private tooltipService: TooltipService, private element: ElementRef) { }
  
  @HostListener('mouseenter')
  onMouseEnter(): void {
    this.id = Math.random();
    this.tooltipService.components.push({ 
      id: this.id, 
      ref: this.element, 
      title: this.tooltipTitle 
    });
  }

  @HostListener('mouseleave')
  onMouseLeave(): void {
    this.destroy();
  }
  
  ngOnDestroy(): void {
    this.destroy();
  }

  destroy(): void {
    const idx = this.tooltipService.components.findIndex((t) => { 
      return t.id === this.id; 
    });

    this.tooltipService.components.splice(idx, 1);
  }
  
}