From 23a2fd567af598625267187dea2db487e570b9b7 Mon Sep 17 00:00:00 2001
From: Egor Volvachev <34657605+volvachev@users.noreply.github.com>
Date: Wed, 15 Jun 2022 09:37:05 +0300
Subject: [PATCH] fix(module:tooltip): is not aligned on first display (#7457)

close #7453
---
 components/tooltip/base.ts | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/components/tooltip/base.ts b/components/tooltip/base.ts
index 7a45f16ced..2fe7fa5322 100644
--- a/components/tooltip/base.ts
+++ b/components/tooltip/base.ts
@@ -23,8 +23,8 @@ import {
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
-import { Subject } from 'rxjs';
-import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { asapScheduler, Subject } from 'rxjs';
+import { delay, distinctUntilChanged, filter, takeUntil } from 'rxjs/operators';
 
 import { NzConfigService, PopConfirmConfig, PopoverConfig } from 'ng-zorro-antd/core/config';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
@@ -184,11 +184,25 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnDestroy, Af
 
     this.initProperties();
 
-    this.component.nzVisibleChange
-      .pipe(distinctUntilChanged(), takeUntil(this.destroy$))
-      .subscribe((visible: boolean) => {
-        this.internalVisible = visible;
-        this.visibleChange.emit(visible);
+    const ngVisibleChange$ = this.component.nzVisibleChange.pipe(distinctUntilChanged());
+
+    ngVisibleChange$.pipe(takeUntil(this.destroy$)).subscribe((visible: boolean) => {
+      this.internalVisible = visible;
+      this.visibleChange.emit(visible);
+    });
+
+    // In some cases, the rendering takes into account the height at which the `arrow` is in wrong place,
+    // so `cdk` sets the container position incorrectly.
+    // To avoid this, after placing the `arrow` in the correct position, we should `re-calculate` the position of the `overlay`.
+    ngVisibleChange$
+      .pipe(
+        filter((visible: boolean) => visible),
+        delay(0, asapScheduler),
+        filter(() => Boolean(this.component?.overlay?.overlayRef)),
+        takeUntil(this.destroy$)
+      )
+      .subscribe(() => {
+        this.component?.updatePosition();
       });
   }