feat(module:tooltip,popover,popconfirm): support "nzMouseEnterDelay" …

…and "nzMouseLeaveDelay" (#758) close #757
NG-ZORRO · Dec 15, 2017 · 3a894f0 · 3a894f0
1 parent 4a50d0d
commit 3a894f0
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 16 deletions.
diff --git 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<boolean> = new EventEmitter();
   @ContentChild('nzTemplate') nzTemplate: TemplateRef<void>;
   @ViewChild('overlay') overlay: ConnectedOverlayDirective;

diff --git 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
@@ -137,6 +137,18 @@ <h3 id="Rate"><span>nz-popconfirm</span><!-- <a class="anchor">#</a> --></h3>
           <td>object</td>
           <td>无</td>
         </tr>
+        <tr>
+          <td>nzMouseEnterDelay</td>
+          <td>鼠标移入后延时多少才显示 Tooltip，单位：秒（nzTrigger='hover'时有效）</td>
+          <td>number</td>
+          <td>0</td>
+        </tr>
+        <tr>
+          <td>nzMouseLeaveDelay</td>
+          <td>鼠标移出后延时多少才隐藏 Tooltip，单位：秒（nzTrigger='hover'时有效）</td>
+          <td>number</td>
+          <td>0.1</td>
+        </tr>
       </tbody>
     </table>
 

diff --git a/src/showcase/nz-demo-popover/nz-demo-popover.html b/src/showcase/nz-demo-popover/nz-demo-popover.html
@@ -101,6 +101,18 @@ <h3 id="Rate"><span>nz-popover</span><!-- <a class="anchor">#</a> --></h3>
           <td>object</td>
           <td>无</td>
         </tr>
+        <tr>
+          <td>nzMouseEnterDelay</td>
+          <td>鼠标移入后延时多少才显示 Tooltip，单位：秒（nzTrigger='hover'时有效）</td>
+          <td>number</td>
+          <td>0</td>
+        </tr>
+        <tr>
+          <td>nzMouseLeaveDelay</td>
+          <td>鼠标移出后延时多少才隐藏 Tooltip，单位：秒（nzTrigger='hover'时有效）</td>
+          <td>number</td>
+          <td>0.1</td>
+        </tr>
       </tbody>
     </table>
   </section>

diff --git a/src/showcase/nz-demo-tooltip/nz-demo-tooltip.html b/src/showcase/nz-demo-tooltip/nz-demo-tooltip.html
@@ -101,6 +101,18 @@ <h2 id="API"><span>API</span>
           <td>object</td>
           <td>无</td>
         </tr>
+        <tr>
+          <td>nzMouseEnterDelay</td>
+          <td>鼠标移入后延时多少才显示 Tooltip，单位：秒（nzTrigger='hover'时有效）</td>
+          <td>number</td>
+          <td>0</td>
+        </tr>
+        <tr>
+          <td>nzMouseLeaveDelay</td>
+          <td>鼠标移出后延时多少才隐藏 Tooltip，单位：秒（nzTrigger='hover'时有效）</td>
+          <td>number</td>
+          <td>0.1</td>
+        </tr>
       </tbody>
     </table>
     <h2 id="注意"><span>注意</span>