diff --git a/components/popconfirm/nz-popconfirm.directive.ts b/components/popconfirm/nz-popconfirm.directive.ts index 2d5631026a6..deb04b2ace8 100644 --- a/components/popconfirm/nz-popconfirm.directive.ts +++ b/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); } /** diff --git a/components/popover/nz-popover.directive.ts b/components/popover/nz-popover.directive.ts index ea262486398..fd546998d4f 100644 --- a/components/popover/nz-popover.directive.ts +++ b/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); } } diff --git a/components/tooltip/nz-tooltip-base.directive.ts b/components/tooltip/nz-tooltip-base.directive.ts index a07db0983fa..739e87a20e8 100644 --- a/components/tooltip/nz-tooltip-base.directive.ts +++ b/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 { diff --git a/components/tooltip/nz-tooltip-scroll.directive.ts b/components/tooltip/nz-tooltip-scroll.directive.ts new file mode 100644 index 00000000000..6a9b8e177e2 --- /dev/null +++ b/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(); + + @HostListener('scroll') + onScroll(): void { + this.scroll$.next(); + } +} diff --git a/components/tooltip/nz-tooltip.directive.ts b/components/tooltip/nz-tooltip.directive.ts index 4fb298ec8fb..3240054de6f 100644 --- a/components/tooltip/nz-tooltip.directive.ts +++ b/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); } } diff --git a/components/tooltip/nz-tooltip.module.ts b/components/tooltip/nz-tooltip.module.ts index 616a2900725..a8d02698117 100644 --- a/components/tooltip/nz-tooltip.module.ts +++ b/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 {} diff --git a/components/tooltip/nz-tooltip.spec.ts b/components/tooltip/nz-tooltip.spec.ts index d425758edb7..9ab4e3bb09d 100644 --- a/components/tooltip/nz-tooltip.spec.ts +++ b/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'; title-template - ` + +
+
+
+ `, + 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 { diff --git a/docs/contributing.zh-CN.md b/docs/contributing.zh-CN.md index 2cd4b87a02c..d3058855e7e 100644 --- a/docs/contributing.zh-CN.md +++ b/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 diff --git a/docs/faq.en-US.md b/docs/faq.en-US.md index ac9a907a6dd..a5622d8a7f8 100644 --- a/docs/faq.en-US.md +++ b/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. diff --git a/docs/faq.zh-CN.md b/docs/faq.zh-CN.md index 478f6c29e69..b1fbfbd0e63 100644 --- a/docs/faq.zh-CN.md +++ b/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指令即可。