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