feat(module:tooltip,popover,popconfirm): support hover on the content…

… of it's overlay close #701
NG-ZORRO · Dec 10, 2017 · e712d87 · e712d87
1 parent 403f17b
commit e712d87
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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);
+  }
 }