feat: tooltip will change the position with the change of origin in custom element

components/popconfirm/nz-popconfirm.directive.ts

@@ -27,6 +27,7 @@ import { takeUntil } from 'rxjs/operators';
 import { InputBoolean, NzNoAnimationDirective, NzTSType } from 'ng-zorro-antd/core';
 import { NzTooltipBaseDirective, NzTooltipTrigger } from 'ng-zorro-antd/tooltip';
 
+import { NzTooltipScrollDirective } from 'ng-zorro-antd/tooltip/nz-tooltip-scroll.directive';
 import { NzPopconfirmComponent } from './nz-popconfirm.component';
 
 @Directive({
@@ -78,9 +79,10 @@ export class NzPopconfirmDirective extends NzTooltipBaseDirective implements OnI
     hostView: ViewContainerRef,
     resolver: ComponentFactoryResolver,
     renderer: Renderer2,
+    @Optional() nzTooltipScrollDirective: NzTooltipScrollDirective,
     @Host() @Optional() noAnimation?: NzNoAnimationDirective
   ) {
-    super(elementRef, hostView, resolver, renderer, noAnimation);
+    super(elementRef, hostView, resolver, renderer, nzTooltipScrollDirective, noAnimation);
   }
 
   /**

components/popover/nz-popover.directive.ts

@@ -21,6 +21,7 @@ import {
 import { NzNoAnimationDirective, NzTSType } from 'ng-zorro-antd/core';
 import { NzTooltipBaseDirective, NzTooltipTrigger } from 'ng-zorro-antd/tooltip';
 
+import { NzTooltipScrollDirective } from 'ng-zorro-antd/tooltip/nz-tooltip-scroll.directive';
 import { NzPopoverComponent } from './nz-popover.component';
 
 @Directive({
@@ -44,8 +45,9 @@ export class NzPopoverDirective extends NzTooltipBaseDirective {
     hostView: ViewContainerRef,
     resolver: ComponentFactoryResolver,
     renderer: Renderer2,
-    @Host() @Optional() public noAnimation?: NzNoAnimationDirective
+    @Optional() nzTooltipScrollDirective: NzTooltipScrollDirective,
+    @Host() @Optional() noAnimation?: NzNoAnimationDirective
   ) {
-    super(elementRef, hostView, resolver, renderer, noAnimation);
+    super(elementRef, hostView, resolver, renderer, nzTooltipScrollDirective, noAnimation);
   }
 }

components/tooltip/nz-tooltip-base.directive.ts

@@ -27,6 +27,7 @@ import { Subject } from 'rxjs';
 import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
 
 import { NzTooltipBaseComponent } from './nz-tooltip-base.component';
+import { NzTooltipScrollDirective } from './nz-tooltip-scroll.directive';
 import { NzTooltipTrigger } from './nz-tooltip.definitions';
 
 export abstract class NzTooltipBaseDirective implements OnChanges, OnInit, OnDestroy, AfterViewInit {
@@ -116,6 +117,7 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnInit, OnDes
     protected hostView: ViewContainerRef,
     protected resolver: ComponentFactoryResolver,
     protected renderer: Renderer2,
+    protected nzTooltipScrollDirective: NzTooltipScrollDirective,
     protected noAnimation?: NzNoAnimationDirective
   ) {}
 
@@ -166,6 +168,9 @@ Please use 'nzTooltipTrigger' instead. The same with 'nz-popover' and 'nz-popcon
       this.isTooltipComponentVisible = visible;
       this.nzVisibleChange.emit(visible);
     });
+    if (this.nzTooltipScrollDirective) {
+      this.nzTooltipScrollDirective.scroll$.pipe(takeUntil(this.$destroy)).subscribe(() => this.updatePosition());
+    }
   }
 
   ngAfterViewInit(): void {

components/tooltip/nz-tooltip-scroll.directive.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { Directive, HostListener } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Directive({
+  selector: '[nz-tooltip-scroll]'
+})
+export class NzTooltipScrollDirective {
+  scroll$ = new Subject<void>();
+
+  @HostListener('scroll')
+  onScroll(): void {
+    this.scroll$.next();
+  }
+}

components/tooltip/nz-tooltip.directive.ts

@@ -21,6 +21,7 @@ import {
 import { NzNoAnimationDirective, NzTSType } from 'ng-zorro-antd/core';
 
 import { NzTooltipBaseDirective } from './nz-tooltip-base.directive';
+import { NzTooltipScrollDirective } from './nz-tooltip-scroll.directive';
 import { NzToolTipComponent } from './nz-tooltip.component';
 import { NzTooltipTrigger } from './nz-tooltip.definitions';
 
@@ -52,8 +53,9 @@ export class NzTooltipDirective extends NzTooltipBaseDirective {
     hostView: ViewContainerRef,
     resolver: ComponentFactoryResolver,
     renderer: Renderer2,
+    @Optional() nzTooltipScrollDirective: NzTooltipScrollDirective,
     @Host() @Optional() noAnimation?: NzNoAnimationDirective
   ) {
-    super(elementRef, hostView, resolver, renderer, noAnimation);
+    super(elementRef, hostView, resolver, renderer, nzTooltipScrollDirective, noAnimation);
   }
 }

components/tooltip/nz-tooltip.module.ts

@@ -13,13 +13,15 @@ import { NgModule } from '@angular/core';
 import { NzAddOnModule, NzNoAnimationModule, NzOverlayModule } from 'ng-zorro-antd/core';
 
 // NOTE: the `t` is not uppercase in directives. Change this would however introduce breaking change.
+import { NzTooltipScrollDirective } from './nz-tooltip-scroll.directive';
 import { NzToolTipComponent } from './nz-tooltip.component';
 import { NzTooltipDirective } from './nz-tooltip.directive';
 
 @NgModule({
-  declarations: [NzToolTipComponent, NzTooltipDirective],
-  exports: [NzToolTipComponent, NzTooltipDirective],
+  declarations: [NzToolTipComponent, NzTooltipDirective, NzTooltipScrollDirective],
+  exports: [NzToolTipComponent, NzTooltipDirective, NzTooltipScrollDirective],
   imports: [CommonModule, OverlayModule, NzAddOnModule, NzOverlayModule, NzNoAnimationModule],
-  entryComponents: [NzToolTipComponent]
+  entryComponents: [NzToolTipComponent],
+  providers: [NzTooltipScrollDirective]
 })
 export class NzToolTipModule {}

components/tooltip/nz-tooltip.spec.ts

@@ -7,6 +7,7 @@ import { dispatchMouseEvent } from 'ng-zorro-antd/core';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 
 import { NzTooltipBaseDirective } from './nz-tooltip-base.directive';
+import { NzTooltipScrollDirective } from './nz-tooltip-scroll.directive';
 import { NzTooltipDirective } from './nz-tooltip.directive';
 import { NzToolTipModule } from './nz-tooltip.module';
 
@@ -48,9 +49,32 @@ import { NzToolTipModule } from './nz-tooltip.module';
     <ng-template #template>
       title-template
     </ng-template>
-  `
+
+    <div #scrollContainer class="scroll-container" nz-tooltip-scroll>
+      <div #scrollTooltipTemplate class="scroll" nz-tooltip [nzVisible]="true" nzTitle="prompt text"></div>
+    </div>
+  `,
+  styles: [
+    `
+      .scroll-container {
+        padding: 50px;
+        width: 300px;
+        height: 100px;
+        background: pink;
+        overflow: auto;
+      }
+      .scroll {
+        width: 300px;
+        height: 500px;
+        background: blue;
+      }
+    `
+  ]
 })
 export class NzTooltipTestComponent {
+  @ViewChild(NzTooltipScrollDirective, { static: false }) nzTooltipScrollDirective: NzTooltipScrollDirective;
+  @ViewChild('scrollTooltipTemplate', { static: false, read: NzTooltipDirective }) scrollTooltipTemplate: NzTooltipDirective;
+
   @ViewChild('titleString', { static: false }) titleString: ElementRef;
   @ViewChild('titleString', { static: false, read: NzTooltipDirective })
   titleStringDirective: NzTooltipDirective;
@@ -64,6 +88,7 @@ export class NzTooltipTestComponent {
   trigger: string | null = 'click';
 
   @ViewChild('inBtnGroup', { static: false }) inBtnGroup: ElementRef;
+  @ViewChild('scrollContainer', { static: false }) scrollContainer: ElementRef;
 
   title: string | null = 'title-string';
   visible = false;
@@ -251,6 +276,21 @@ describe('NzTooltip', () => {
       expect(triggerElement.nextSibling.nextSibling.tagName).toBe('BUTTON');
     }));
   });
+
+  describe('should support scoller expect for body', () => {
+    it('listen scroll event, change the position with the change of origin', fakeAsync(() => {
+      const scrollContainerElement = component.scrollContainer.nativeElement;
+      const spy1 = spyOn(component.nzTooltipScrollDirective, 'onScroll');
+      const spy2 = spyOn(component.scrollTooltipTemplate, 'updatePosition');
+      scrollContainerElement.scrollTop = 50;
+      scrollContainerElement.dispatchEvent(new Event('scroll'));
+      expect(spy1).toHaveBeenCalled();
+      fixture.whenStable().then(() => {
+        tick();
+        expect(spy2).toHaveBeenCalled();
+      });
+    }));
+  });
 });
 
 function getOverlayElementForTooltip(tooltip: NzTooltipBaseDirective): HTMLElement {

docs/contributing.zh-CN.md

@@ -11,7 +11,7 @@ title: 贡献指南
 
 ## 透明的开发
 
-我们所有的工作都会放在 [GitHub](https://github.com/NG-ZORRO/ng-zorro-antd) 上。不管是核心团队的成员还是外部贡献者的 pull request 都需要进过同样流程的 review。
+我们所有的工作都会放在 [GitHub](https://github.com/NG-ZORRO/ng-zorro-antd) 上。不管是核心团队的成员还是外部贡献者的 pull request 都需要经过同样流程的 review。
 
 ## Bugs
 

docs/faq.en-US.md

@@ -44,3 +44,7 @@ You can checkout the official docs and Angular forums. A good trick is to search
 ### Relationship between NG-ZORRO and Ant Design
 
 NG-ZORRO are maintained by engineers from Computing Platform Unit and Aliyun of Alibaba Inc. It follows Ant Design' specs and would be synced to Ant Design React regularly.
+
+### tooltip can't change the position with the change of custom element
+
+You can add nz-tooltip-scroll directive to the scroll element.

docs/faq.zh-CN.md

@@ -49,3 +49,7 @@ ISSUE 列表是为了 开发者 和 用户 追踪相关的开发进度而设计
 ### NG-ZORRO 与 Ant Design 的关系
 
 NG-ZORRO 由阿里计算平台事业部、阿里云等不同部门的一些小伙伴在原业务组件的基础上共同构建而成，整体的设计完全兼容并遵守 Ant Design 的规范，并定期会与 Ant Design React 版本保持功能同步。
+
+### 在自定义容器中，tooltip无法跟随参考元素一起滚动
+
+只需要在滚动的元素上添加nz-tooltip-scroll指令即可。