diff --git a/components/popconfirm/doc/index.en-US.md b/components/popconfirm/doc/index.en-US.md
index 5cc9d9ef8fb..06d4b9374ec 100644
--- a/components/popconfirm/doc/index.en-US.md
+++ b/components/popconfirm/doc/index.en-US.md
@@ -40,7 +40,7 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
| `[nzPopconfirmBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` |
| Param | Description | Type | Default value | Global Config |
-| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------------- | ------------- |
+| ------------------- |-------------------------------------------------------------------------------------------------------------------------------------------------------| -------------------------------------------------------------------- | ------------- | ------------- |
| `[nzCancelText]` | Text of the Cancel button | `string` | `'Cancel'` | - |
| `[nzOkText]` | Text of the Confirm button | `string` | `'Confirm'` | - |
| `[nzOkType]` | Button `type` of the Confirm button | `'primary' \| 'ghost' \| 'dashed' \| 'danger' \| 'default'` | `'primary'` | - |
diff --git a/components/popover/demo/overlay.md b/components/popover/demo/overlay.md
new file mode 100755
index 00000000000..51e92d9fc58
--- /dev/null
+++ b/components/popover/demo/overlay.md
@@ -0,0 +1,14 @@
+---
+order: 8
+title:
+ zh-CN: 禁止通过蒙层关闭面板
+ en-US: Disable closing popover through mask
+---
+
+## zh-CN
+
+在 `nzPopoverTrigger` 为 `'click'` 时，通过设置 `nzPopoverOverlayClickable` 为 `false` 禁止通过点击蒙层关闭面板。
+
+## en-US
+
+Set `nzPopoverOverlayClickable` to be `false` to disable closing popover by clicking the mask when `nzPopoverTrigger` is `'click'`.
diff --git a/components/popover/demo/overlay.ts b/components/popover/demo/overlay.ts
new file mode 100644
index 00000000000..43ff1e419fd
--- /dev/null
+++ b/components/popover/demo/overlay.ts
@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzPopoverModule } from 'ng-zorro-antd/popover';
+
+@Component({
+ selector: 'nz-demo-popover-overlay',
+ imports: [NzButtonModule, NzPopoverModule],
+ template: `
+
+
+
+
+ `
+})
+export class NzDemoPopoverOverlayComponent {
+ visible = false;
+
+ visibleChange(value: boolean): void {
+ this.visible = value;
+ }
+}
diff --git a/components/popover/doc/index.en-US.md b/components/popover/doc/index.en-US.md
index 467f0b395c2..6f7432ae152 100644
--- a/components/popover/doc/index.en-US.md
+++ b/components/popover/doc/index.en-US.md
@@ -21,20 +21,21 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover';
### [nz-popover]
-| Param | Description | Type | Default value |
-| ------------------------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
-| `[nzPopoverArrowPointAtCenter]` | Arrow point at center of the origin | `boolean` | `false` |
-| `[nzPopoverTitle]` | Title of the popover | `string \| TemplateRef` | - |
-| `[nzPopoverContent]` | Content of the popover | `string \| TemplateRef` | - |
-| `[nzPopoverTrigger]` | Popover trigger mode. If set to `null` it would not be triggered | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` |
-| `[nzPopoverPlacement]` | The position of the popover relative to the target | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array` | `'top'` |
-| `[nzPopoverOrigin]` | Origin of the tooltip | `ElementRef` | - |
-| `[nzPopoverVisible]` | Show or hide popover | `boolean` | `false` |
-| `(nzPopoverVisibleChange)` | Callback of hide or show | `EventEmitter` | - |
-| `[nzPopoverMouseEnterDelay]` | Delay in seconds, before popover is shown on mouse enter | `number` | `0.15` |
-| `[nzPopoverMouseLeaveDelay]` | Delay in seconds, before popover is hidden on mouse leave | `number` | `0.1` |
-| `[nzPopoverOverlayClassName]` | Class name of the popover card | `string` | - |
-| `[nzPopoverOverlayStyle]` | Style of the popover card | `object` | - |
+| Param | Description | Type | Default value |
+| ------------------------------- | ---------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `[nzPopoverArrowPointAtCenter]` | Arrow point at center of the origin | `boolean` | `false` |
+| `[nzPopoverTitle]` | Title of the popover | `string \| TemplateRef` | - |
+| `[nzPopoverContent]` | Content of the popover | `string \| TemplateRef` | - |
+| `[nzPopoverTrigger]` | Popover trigger mode. If set to `null` it would not be triggered | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` |
+| `[nzPopoverPlacement]` | The position of the popover relative to the target | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array` | `'top'` |
+| `[nzPopoverOrigin]` | Origin of the tooltip | `ElementRef` | - |
+| `[nzPopoverVisible]` | Show or hide popover | `boolean` | `false` |
+| `(nzPopoverVisibleChange)` | Callback of hide or show | `EventEmitter` | - |
+| `[nzPopoverMouseEnterDelay]` | Delay in seconds, before popover is shown on mouse enter | `number` | `0.15` |
+| `[nzPopoverMouseLeaveDelay]` | Delay in seconds, before popover is hidden on mouse leave | `number` | `0.1` |
+| `[nzPopoverOverlayClassName]` | Class name of the popover card | `string` | - |
+| `[nzPopoverOverlayStyle]` | Style of the popover card | `object` | - |
+| `[nzPopoverOverlayClickable]` | Click the mask to close the bubble box. Only the `click` trigger behavior is valid | `boolean` | `true` |
Consult [Tooltip's documentation](/components/tooltip/en#api) to find more APIs.
| `[nzPopoverBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` |
diff --git a/components/popover/doc/index.zh-CN.md b/components/popover/doc/index.zh-CN.md
index 25ccdae919b..94e33453543 100644
--- a/components/popover/doc/index.zh-CN.md
+++ b/components/popover/doc/index.zh-CN.md
@@ -22,21 +22,22 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover';
### [nz-popover]
-| 参数 | 说明 | 类型 | 默认值 |
-| ------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| `[nzPopoverArrowPointAtCenter]` | 箭头指向锚点的中心 | `boolean` | `false` |
-| `[nzPopoverTitle]` | 标题 | `string \| TemplateRef` | - |
-| `[nzPopoverContent]` | 用于定义内容 | `string \| TemplateRef` | - |
-| `[nzPopoverTrigger]` | 触发行为，为 `null` 时不响应光标事件 | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` |
-| `[nzPopoverPlacement]` | 气泡框位置 | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array` | `'top'` |
-| `[nzPopoverOrigin]` | 气泡框定位元素 | `ElementRef` | - |
-| `[nzPopoverVisible]` | 显示隐藏气泡框 | `boolean` | `false` |
-| `(nzPopoverVisibleChange)` | 显示隐藏的事件 | `EventEmitter` | - |
-| `[nzPopoverMouseEnterDelay]` | 鼠标移入后延时多少才显示气泡框，单位：秒 | `number` | `0.15` |
-| `[nzPopoverMouseLeaveDelay]` | 鼠标移出后延时多少才隐藏气泡框，单位：秒 | `number` | `0.1` |
-| `[nzPopoverOverlayClassName]` | 卡片类名 | `string` | - |
-| `[nzPopoverOverlayStyle]` | 卡片样式 | `object` | - |
-| `[nzPopoverBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` |
+| 参数 | 说明 | 类型 | 默认值 |
+| ------------------------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
+| `[nzPopoverArrowPointAtCenter]` | 箭头指向锚点的中心 | `boolean` | `false` |
+| `[nzPopoverTitle]` | 标题 | `string \| TemplateRef` | - |
+| `[nzPopoverContent]` | 用于定义内容 | `string \| TemplateRef` | - |
+| `[nzPopoverTrigger]` | 触发行为，为 `null` 时不响应光标事件 | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` |
+| `[nzPopoverPlacement]` | 气泡框位置 | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array` | `'top'` |
+| `[nzPopoverOrigin]` | 气泡框定位元素 | `ElementRef` | - |
+| `[nzPopoverVisible]` | 显示隐藏气泡框 | `boolean` | `false` |
+| `(nzPopoverVisibleChange)` | 显示隐藏的事件 | `EventEmitter` | - |
+| `[nzPopoverMouseEnterDelay]` | 鼠标移入后延时多少才显示气泡框，单位：秒 | `number` | `0.15` |
+| `[nzPopoverMouseLeaveDelay]` | 鼠标移出后延时多少才隐藏气泡框，单位：秒 | `number` | `0.1` |
+| `[nzPopoverOverlayClassName]` | 卡片类名 | `string` | - |
+| `[nzPopoverOverlayStyle]` | 卡片样式 | `object` | - |
+| `[nzPopoverBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` |
+| `[nzPopoverOverlayClickable]` | 点击蒙层关闭气泡框，仅`click`触发行为有效 | `boolean` | `true` |
更多属性请参考 [Tooltip](/components/tooltip/zh#api)。
diff --git a/components/popover/popover.spec.ts b/components/popover/popover.spec.ts
index fc43acfff22..ce6f8816b47 100644
--- a/components/popover/popover.spec.ts
+++ b/components/popover/popover.spec.ts
@@ -104,6 +104,18 @@ describe('NzPopover', () => {
waitingForTooltipToggling();
expect(overlayContainerElement.children[0].classList).toContain('cdk-overlay-backdrop');
}));
+
+ it('nzPopoverOverlayClickable: false is to prohibit hiding', fakeAsync(() => {
+ const triggerElement = component.hideTemplate.nativeElement;
+
+ dispatchMouseEvent(triggerElement, 'click');
+ waitingForTooltipToggling();
+ expect(overlayContainerElement.textContent).toContain('content-string');
+
+ dispatchMouseEvent(document.body, 'click');
+ waitingForTooltipToggling();
+ expect(overlayContainerElement.textContent).toContain('content-string');
+ }));
});
@Component({
@@ -123,6 +135,17 @@ describe('NzPopover', () => {
[nzPopoverBackdrop]="true"
>
+
+ Click
+
+
title-template
content-template
@@ -141,6 +164,10 @@ export class NzPopoverTestComponent {
@ViewChild('changePopover', { static: true, read: NzPopoverDirective })
changePopoverNzPopoverDirective!: NzPopoverDirective;
+ @ViewChild('hideTemplate', { static: false }) hideTemplate!: ElementRef;
+ @ViewChild('hideTemplate', { static: false, read: NzPopoverDirective })
+ hideTemplateDirective!: NzPopoverDirective;
+
@ViewChild('backdropPopover', { static: true }) backdropPopover!: ElementRef;
content = 'content';
diff --git a/components/popover/popover.ts b/components/popover/popover.ts
index b676bbeb320..51224b2b455 100644
--- a/components/popover/popover.ts
+++ b/components/popover/popover.ts
@@ -54,6 +54,7 @@ export class NzPopoverDirective extends NzTooltipBaseDirective {
@Input('nzPopoverMouseLeaveDelay') override mouseLeaveDelay?: number;
@Input('nzPopoverOverlayClassName') override overlayClassName?: string;
@Input('nzPopoverOverlayStyle') override overlayStyle?: NgStyleInterface;
+ @Input('nzPopoverOverlayClickable') override overlayClickable?: boolean;
@Input() @WithConfig() nzPopoverBackdrop?: boolean = false;
diff --git a/components/tooltip/base.ts b/components/tooltip/base.ts
index df3ee840d6a..a278dd9ecae 100644
--- a/components/tooltip/base.ts
+++ b/components/tooltip/base.ts
@@ -56,6 +56,7 @@ export abstract class NzTooltipBaseDirective implements AfterViewInit, OnChanges
mouseLeaveDelay?: number;
overlayClassName?: string;
overlayStyle?: NgStyleInterface;
+ overlayClickable?: boolean;
cdkConnectedOverlayPush?: boolean;
visibleChange = new EventEmitter();
@@ -99,6 +100,10 @@ export abstract class NzTooltipBaseDirective implements AfterViewInit, OnChanges
return this.overlayStyle || null;
}
+ protected get _overlayClickable(): boolean {
+ return this.overlayClickable ?? true;
+ }
+
private internalVisible = false;
protected getProxyPropertyMap(): PropertyMapping {
@@ -272,6 +277,7 @@ export abstract class NzTooltipBaseDirective implements AfterViewInit, OnChanges
mouseLeaveDelay: ['nzMouseLeaveDelay', () => this._mouseLeaveDelay],
overlayClassName: ['nzOverlayClassName', () => this._overlayClassName],
overlayStyle: ['nzOverlayStyle', () => this._overlayStyle],
+ overlayClickable: ['nzOverlayClickable', () => this._overlayClickable],
arrowPointAtCenter: ['nzArrowPointAtCenter', () => this.arrowPointAtCenter],
cdkConnectedOverlayPush: ['cdkConnectedOverlayPush', () => this.cdkConnectedOverlayPush],
...this.getProxyPropertyMap()
@@ -342,6 +348,7 @@ export abstract class NzTooltipBaseComponent implements OnDestroy, OnInit {
nzArrowPointAtCenter: boolean = false;
nzOverlayClassName!: string;
nzOverlayStyle: NgStyleInterface = {};
+ nzOverlayClickable: boolean = true;
nzBackdrop = false;
nzMouseEnterDelay?: number;
nzMouseLeaveDelay?: number;
@@ -467,6 +474,9 @@ export abstract class NzTooltipBaseComponent implements OnDestroy, OnInit {
}
onClickOutside(event: MouseEvent): void {
+ if (!this.nzOverlayClickable) {
+ return;
+ }
const target = _getEventTarget(event);
if (!this.origin.nativeElement.contains(target) && this.nzTrigger !== null) {
this.hide();