npm i @angular/cdk

@Directive({
  selector: '[ui-tooltip]',
  exportAs: 'uiTooltip'
})
export class TooltipDirective implements OnInit, OnDestroy, AfterViewInit {
  @Input()
  content: string;
  @Input()
  view: TemplateRef<any>;
  component: TooltipComponent;
  componentFactory: ComponentFactory<
    TooltipComponent
  > = this.resolver.resolveComponentFactory(TooltipComponent);
  protected readonly disposables: Array<() => void> = [];
  constructor(
    private elementRef: ElementRef,
    private hostView: ViewContainerRef,
    private renderer: Renderer2,
    private resolver: ComponentFactoryResolver
  ) {}
  ngOnInit(): void {}
  ngAfterViewInit(): void {
    this.registerTriggers();
  }
  createComponent(): void {
    const componentRef = this.hostView.createComponent(this.componentFactory);
    this.component = componentRef.instance as TooltipComponent;
    this.component.setTitle(this.content);
    this.component.setView(this.view);
    this.component.setOverlayOrigin({ elementRef: this.elementRef });
    this.component.mouseleave.subscribe(x => {
      this.component.hide();
    });
  }
  registerTriggers(): void {
    const el = this.elementRef.nativeElement;
    const listnerMouseenter = this.renderer.listen(el, 'mouseenter', () => {
      this.createComponent();
    });
    this.disposables.push(listnerMouseenter);
    const listnerMouseleave = this.renderer.listen(el, 'mouseleave', () => {
      console.log(el);
      setTimeout(x => {
        if (!this.component.isActive) {
          this.component.hide();
        }
      }, 50);
    });
    this.disposables.push(listnerMouseleave);
  }
  ngOnDestroy(): void {
    this.disposables.forEach(dispose => dispose());
  }
}

@Component({
  selector: 'uikit-tooltip',
  exportAs: 'uikitTooltip',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <ng-template
      #overlay="cdkConnectedOverlay"
      cdkConnectedOverlay
      [cdkConnectedOverlayOrigin]="origin"
      [cdkConnectedOverlayOpen]="visible"
      [cdkConnectedOverlayPositions]="positions"
      [cdkConnectedOverlayPush]="true"
      ,
      (detach)="hide()"
      (positionChange)="positionChange($event)"
    >
      <div #tooltip class="tooltip-container">
        <div class="tooltip-body">
          <div *ngIf="title">{{ title }}</div>
          <div *ngIf="view">
            <ng-template [ngTemplateOutlet]="$any(view)"></ng-template>
          </div>
        </div>
      </div>
    </ng-template>
  `,
  styleUrls: ['./tooltip.component.scss']
})
export class TooltipComponent implements OnInit, AfterViewInit {
  title: string;
  view: TemplateRef<any>;
  isActive = false;
  @ViewChild('overlay', { static: false }) overlay!: CdkConnectedOverlay;
  @ViewChild('tooltip', { static: false }) tooltip!: ElementRef;
  @Output() mouseleave = new EventEmitter();
  origin!: CdkOverlayOrigin;
  positions = [
    new ConnectionPositionPair(
      { originX: 'center', originY: 'top' },
      { overlayX: 'center', overlayY: 'bottom' },
      0,
      0,
      'tooltip-body-top'
    ),
    new ConnectionPositionPair(
      { originX: 'center', originY: 'bottom' },
      { overlayX: 'center', overlayY: 'top' },
      0,
      0,
      'tooltip-body-bottom'
    )
  ];
  visible = false;
  constructor(public cdr: ChangeDetectorRef) {}
  overlayRef: any;
  ngOnInit(): void {}
  ngAfterViewInit() {
    fromEvent<any>(this.tooltip.nativeElement, 'mouseenter').subscribe(
      (event: any) => {
        this.isActive = true;
        this.cdr.markForCheck();
      }
    );
    fromEvent<any>(this.tooltip.nativeElement, 'mouseleave').subscribe(
      (event: any) => {
        this.isActive = false;
        this.cdr.markForCheck();
        this.mouseleave.emit();
      }
    );
  }
  setOverlayOrigin(origin: CdkOverlayOrigin): void {
    this.origin = origin;
    this.show();
  }
  hide(): void {
    this.visible = false;
    this.cdr.markForCheck();
  }
  show(): void {
    this.visible = true;
  }
  setTitle(title: string): void {
    this.title = title;
  }
  setView(view): void {
    this.view = view;
  }
  positionChange($event) {
  }
}