Popconfirm
Popconfirm
Pop up a bubble confirmation box for an action.
Importimport { Popconfirm } from "antd"; |
Sourcecomponents/popconfirm |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Importimport { Popconfirm } from "antd"; |
Sourcecomponents/popconfirm |
A simple and compact dialog used for asking for user confirmation.
The difference with the confirm modal dialog is that it's more lightweight than the static popped full-screen confirm modal.
Common props ref：Common props
| Param | Description | Type | Default value | Version |
|---|---|---|---|---|
| cancelButtonProps | The cancel button props | ButtonProps | - | |
| cancelText | The text of the Cancel button | string | Cancel | |
| disabled | Whether show popconfirm when click its childrenNode | boolean | false | |
| icon | Customize icon of confirmation | ReactNode | <ExclamationCircle /> | |
| okButtonProps | The ok button props | ButtonProps | - | |
| okText | The text of the Confirm button | string | OK | |
| okType | Button type of the Confirm button | string | primary | |
| showCancel | Show cancel button | boolean | true | 4.18.0 |
| title | The title of the confirmation box | ReactNode | () => ReactNode | - | |
| description | The description of the confirmation box title | ReactNode | () => ReactNode | - | 5.1.0 |
| onCancel | A callback of cancel | function(e) | - | |
| onConfirm | A callback of confirmation | function(e) | - | |
| onPopupClick | A callback of popup click | function(e) | - | 5.5.0 |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| align | This value will be merged into placement's config, please refer to the settings dom-align | object | - | |
| arrow | Change arrow's visible state and change whether the arrow is pointed at the center of target. | boolean | { pointAtCenter: boolean } | true | 5.2.0 |
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | true | |
| color | The background color | string | - | 4.3.0 |
| defaultOpen | Whether the floating tooltip card is open by default | boolean | false | 4.23.0 |
| Whether destroy dom when close | boolean | false | ||
| destroyOnHidden | Whether destroy dom when close | boolean | false | 5.25.0 |
| fresh | Tooltip will cache content when it is closed by default. Setting this property will always keep updating | boolean | false | 5.10.0 |
| getPopupContainer | The DOM container of the tip, the default behavior is to create a div element in body | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 | |
| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 | |
Class name of the tooltip card, please use classNames={{ root: "" }} instead | string | - | ||
Style of the tooltip card, please use styles={{ root: {} }} | React.CSSProperties | - | ||
Style of the tooltip inner content, please use styles={{ body: {} }} | React.CSSProperties | - | ||
| placement | The position of the tooltip relative to the target, which can be one of top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom | string | top | |
| trigger | Tooltip trigger mode. Could be multiple by passing an array | hover | focus | click | contextMenu | Array<string> | hover | |
| open | Whether the floating tooltip card is open or not. Use visible under 4.23.0 (why?) | boolean | false | 4.23.0 |
| zIndex | Config z-index of Tooltip | number | - | |
| onOpenChange | Callback executed when visibility of the tooltip card is changed | (open: boolean) => void | - | 4.23.0 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| zIndexPopup | z-index of Popconfirm | number | 1060 |
findDOMNode is deprecated sometimes appear in strict mode?This is due to the implementation of rc-trigger. rc-trigger forces children to accept ref, otherwise it will fall back to findDOMNode, so children need to be native html tags. If not, you need to use React.forwardRef transparently passes ref to native html tags.
findDOMNode is deprecated reproduce: https://codesandbox.io/p/sandbox/finddomnode-c5hy96forwardRef to fix: https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczsSimilar issues: #15909, #12812.
Please ensure that the child node to accept onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, onFocus, and onClick events, If you create your own component and do not explicitly add these mouse and pointer events as props, the tooltip will never appear. See Example.
It will follow placement config when screen has enough space. And flip when space is not enough (Such as top to bottom or topLeft to bottomLeft). Single direction such as top bottom left right will auto shift on the view:
When placement is set to edge align such as topLeft bottomRight, it will only do flip but not do shift.
For more questions, please refer to Tooltip FAQ.
Auto adjust Popup and arrow position when Popconfirm is close to the edge of the screen. Will be out of screen when exceed limitation.
The basic example supports the title and description props of confirmation.
descriptionis supported in version5.1.0.
There are 12 placement options available. Use arrow: { pointAtCenter: true } if you want the arrow to point at the center of target.
Make it pop up under some conditions.
Asynchronously close a popconfirm when a the OK button is pressed. For example, you can use this pattern when you submit a form.
Set okText and cancelText props to customize the button's labels.
Set icon props to customize the icon.
Asynchronously close a popconfirm when the OK button is pressed. For example, you can use this pattern when you submit a form.
