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 : `
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);
+ }
}