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

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

  constructor(private tooltipService: TooltipService) { }

  @HostListener('mouseenter')
  onMouseEnter(): void {
    this.id = Math.random();
    this.tooltipService.push({ id: this.id, title: this.tooltipTitle });
  }

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

  ngOnDestroy(): void {
    this.destroy();
  }

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

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

}