From 3a894f04399ff094ace93d685501f17dedae739b Mon Sep 17 00:00:00 2001 From: Wilson Zeng Date: Fri, 15 Dec 2017 09:53:36 +0800 Subject: [PATCH] feat(module:tooltip,popover,popconfirm): support "nzMouseEnterDelay" and "nzMouseLeaveDelay" (#758) close #757 --- .../tooltip/nz-tooltip.component.ts | 2 ++ .../tooltip/nz-tooltip.directive.ts | 31 +++++++++---------- .../nz-demo-popconfirm.html | 12 +++++++ .../nz-demo-popover/nz-demo-popover.html | 12 +++++++ .../nz-demo-tooltip/nz-demo-tooltip.html | 12 +++++++ 5 files changed, 53 insertions(+), 16 deletions(-) diff --git a/src/components/tooltip/nz-tooltip.component.ts b/src/components/tooltip/nz-tooltip.component.ts index 210a04fcf04..265756ed20f 100644 --- a/src/components/tooltip/nz-tooltip.component.ts +++ b/src/components/tooltip/nz-tooltip.component.ts @@ -68,6 +68,8 @@ export class NzToolTipComponent { @Input() nzTitle: string; @Input() nzOverlayClassName = ''; @Input() nzOverlayStyle = {}; + @Input() nzMouseEnterDelay = 0; // Unit: second + @Input() nzMouseLeaveDelay = 0.1; // Unit: second @Output() nzVisibleChange: EventEmitter = new EventEmitter(); @ContentChild('nzTemplate') nzTemplate: TemplateRef; @ViewChild('overlay') overlay: ConnectedOverlayDirective; diff --git a/src/components/tooltip/nz-tooltip.directive.ts b/src/components/tooltip/nz-tooltip.directive.ts index 423b4d98d5b..c9fd239ae66 100644 --- a/src/components/tooltip/nz-tooltip.directive.ts +++ b/src/components/tooltip/nz-tooltip.directive.ts @@ -30,7 +30,7 @@ export class NzTooltipDirective implements AfterViewInit { private tooltip: NzToolTipComponent; private isDynamicTooltip = false; // Indicate whether current tooltip is dynamic created - private smoothTimer; // Timer for hiding smoothly + private delayTimer; // Timer for delay enter/leave constructor( public elementRef: ElementRef, @@ -52,13 +52,13 @@ export class NzTooltipDirective implements AfterViewInit { ngAfterViewInit(): void { if (this.tooltip.nzTrigger === 'hover') { let overlayElement; - this.renderer.listen(this.elementRef.nativeElement, 'mouseenter', () => this.showSmoothly()); + this.renderer.listen(this.elementRef.nativeElement, 'mouseenter', () => this.delayEnterLeave(true, true, this.tooltip.nzMouseEnterDelay)); this.renderer.listen(this.elementRef.nativeElement, 'mouseleave', () => { - this.hideSmoothly(); + this.delayEnterLeave(true, false, this.tooltip.nzMouseLeaveDelay); if (this.tooltip.overlay.overlayRef && !overlayElement) { // NOTE: we bind events under "mouseleave" due to the overlayRef is only created after the overlay was completely shown up overlayElement = this.tooltip.overlay.overlayRef.overlayElement; - this.renderer.listen(overlayElement, 'mouseenter', () => this.showSmoothly()); - this.renderer.listen(overlayElement, 'mouseleave', () => this.hideSmoothly()); + this.renderer.listen(overlayElement, 'mouseenter', () => this.delayEnterLeave(false, true)); + this.renderer.listen(overlayElement, 'mouseleave', () => this.delayEnterLeave(false, false)); } }); } else if (this.tooltip.nzTrigger === 'focus') { @@ -82,18 +82,17 @@ export class NzTooltipDirective implements AfterViewInit { this.isTooltipOpen = false; } - private showSmoothly(): void { - if (this.smoothTimer) { - clearTimeout(this.smoothTimer); + private delayEnterLeave(isOrigin: boolean, isEnter: boolean, delay: number = -1): void { + if (this.delayTimer) { // Clear timer during the delay time + window.clearTimeout(this.delayTimer); + this.delayTimer = null; + } else if (delay > 0) { + this.delayTimer = window.setTimeout(() => { + this.delayTimer = null; + isEnter ? this.show() : this.hide(); + }, delay * 1000); } else { - this.show(); + isEnter && isOrigin ? this.show() : this.hide(); // [Compatible] The "isOrigin" is used due to the tooltip will not hide immediately (may caused by the fade-out animation) } } - - private hideSmoothly(): void { - this.smoothTimer = setTimeout(() => { - this.smoothTimer = null; - this.hide(); - }, 50); - } } diff --git a/src/showcase/nz-demo-popconfirm/nz-demo-popconfirm.html b/src/showcase/nz-demo-popconfirm/nz-demo-popconfirm.html index 0945530c5ab..5798f3e3b16 100644 --- a/src/showcase/nz-demo-popconfirm/nz-demo-popconfirm.html +++ b/src/showcase/nz-demo-popconfirm/nz-demo-popconfirm.html @@ -137,6 +137,18 @@

nz-popconfirm

object 无 + + nzMouseEnterDelay + 鼠标移入后延时多少才显示 Tooltip，单位：秒（nzTrigger='hover'时有效） + number + 0 + + + nzMouseLeaveDelay + 鼠标移出后延时多少才隐藏 Tooltip，单位：秒（nzTrigger='hover'时有效） + number + 0.1 + diff --git a/src/showcase/nz-demo-popover/nz-demo-popover.html b/src/showcase/nz-demo-popover/nz-demo-popover.html index 595ca0e1027..3424bb93a7f 100644 --- a/src/showcase/nz-demo-popover/nz-demo-popover.html +++ b/src/showcase/nz-demo-popover/nz-demo-popover.html @@ -101,6 +101,18 @@

nz-popover

object 无 + + nzMouseEnterDelay + 鼠标移入后延时多少才显示 Tooltip，单位：秒（nzTrigger='hover'时有效） + number + 0 + + + nzMouseLeaveDelay + 鼠标移出后延时多少才隐藏 Tooltip，单位：秒（nzTrigger='hover'时有效） + number + 0.1 + diff --git a/src/showcase/nz-demo-tooltip/nz-demo-tooltip.html b/src/showcase/nz-demo-tooltip/nz-demo-tooltip.html index 83a9888f209..908b8f6c3a8 100644 --- a/src/showcase/nz-demo-tooltip/nz-demo-tooltip.html +++ b/src/showcase/nz-demo-tooltip/nz-demo-tooltip.html @@ -101,6 +101,18 @@

API object 无 + + nzMouseEnterDelay + 鼠标移入后延时多少才显示 Tooltip，单位：秒（nzTrigger='hover'时有效） + number + 0 + + + nzMouseLeaveDelay + 鼠标移出后延时多少才隐藏 Tooltip，单位：秒（nzTrigger='hover'时有效） + number + 0.1 +

注意