From e712d8737d059dd9e2f234bc9de22f26d5ff4dfb Mon Sep 17 00:00:00 2001
From: Wilson Zeng <jackzcs@gmail.com>
Date: Sun, 10 Dec 2017 00:24:14 +0800
Subject: [PATCH] feat(module:tooltip,popover,popconfirm): support hover on the
 content of it's overlay

close #701
---
 .../popconfirm/nz-popconfirm.component.ts     |  1 +
 .../popover/nz-popover.component.ts           |  1 +
 .../tooltip/nz-tooltip.directive.ts           | 28 +++++++++++++++++--
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/popconfirm/nz-popconfirm.component.ts b/src/components/popconfirm/nz-popconfirm.component.ts
index 31becd44521..89aaf99a83d 100644
--- a/src/components/popconfirm/nz-popconfirm.component.ts
+++ b/src/components/popconfirm/nz-popconfirm.component.ts
@@ -20,6 +20,7 @@ import { toBoolean } from '../util/convert';
   template     : `
     <ng-content></ng-content>
     <ng-template
+      #overlay="cdkConnectedOverlay"
       cdkConnectedOverlay
       [cdkConnectedOverlayOrigin]="overlayOrigin"
       [cdkConnectedOverlayHasBackdrop]="_hasBackdrop"
diff --git a/src/components/popover/nz-popover.component.ts b/src/components/popover/nz-popover.component.ts
index 9aeeb570e65..cb6e7c31a23 100644
--- a/src/components/popover/nz-popover.component.ts
+++ b/src/components/popover/nz-popover.component.ts
@@ -14,6 +14,7 @@ import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
   template     : `
     <ng-content></ng-content>
     <ng-template
+      #overlay="cdkConnectedOverlay"
       cdkConnectedOverlay
       [cdkConnectedOverlayOrigin]="overlayOrigin"
       [cdkConnectedOverlayHasBackdrop]="_hasBackdrop"
diff --git a/src/components/tooltip/nz-tooltip.directive.ts b/src/components/tooltip/nz-tooltip.directive.ts
index e94a8ed99ab..c21729f7508 100644
--- a/src/components/tooltip/nz-tooltip.directive.ts
+++ b/src/components/tooltip/nz-tooltip.directive.ts
@@ -33,6 +33,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
 
   constructor(
       public elementRef: ElementRef,
@@ -53,8 +54,16 @@ export class NzTooltipDirective implements AfterViewInit {
 
   ngAfterViewInit(): void {
     if (this.tooltip.nzTrigger === 'hover') {
-      this.renderer.listen(this.elementRef.nativeElement, 'mouseenter', () => this.show());
-      this.renderer.listen(this.elementRef.nativeElement, 'mouseleave', () => this.hide());
+      let overlayElement;
+      this.renderer.listen(this.elementRef.nativeElement, 'mouseenter', () => this.showSmoothly());
+      this.renderer.listen(this.elementRef.nativeElement, 'mouseleave', () => {
+        this.hideSmoothly();
+        if (!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());
+        }
+      });
     } else if (this.tooltip.nzTrigger === 'focus') {
       this.renderer.listen(this.elementRef.nativeElement, 'focus', () => this.show());
       this.renderer.listen(this.elementRef.nativeElement, 'blur', () => this.hide());
@@ -75,4 +84,19 @@ export class NzTooltipDirective implements AfterViewInit {
     this.tooltip.hide();
     this.isTooltipOpen = false;
   }
+
+  private showSmoothly(): void {
+    if (this.smoothTimer) {
+      clearTimeout(this.smoothTimer);
+    } else {
+      this.show();
+    }
+  }
+
+  private hideSmoothly(): void {
+    this.smoothTimer = setTimeout(() => {
+      this.smoothTimer = null;
+      this.hide();
+    }, 50);
+  }
 }