logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.2
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Popconfirm

Pop up a bubble confirmation box for an action.
Importimport { Popconfirm } from "antd";
Sourcecomponents/popconfirm
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

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.

Examples

API

Common props ref:Common props

ParamDescriptionTypeDefault valueVersion
cancelButtonPropsThe cancel button propsButtonProps-
cancelTextThe text of the Cancel buttonstringCancel
disabledWhether show popconfirm when click its childrenNodebooleanfalse
iconCustomize icon of confirmationReactNode<ExclamationCircle />
okButtonPropsThe ok button propsButtonProps-
okTextThe text of the Confirm buttonstringOK
okTypeButton type of the Confirm buttonstringprimary
showCancelShow cancel buttonbooleantrue4.18.0
titleThe title of the confirmation boxReactNode | () => ReactNode-
descriptionThe description of the confirmation box titleReactNode | () => ReactNode-5.1.0
onCancelA callback of cancelfunction(e)-
onConfirmA callback of confirmationfunction(e)-
onPopupClickA callback of popup clickfunction(e)-5.5.0
The following APIs are shared by Tooltip, Popconfirm, Popover.
PropertyDescriptionTypeDefaultVersion
alignThis value will be merged into placement's config, please refer to the settings dom-alignobject-
arrowChange arrow's visible state and change whether the arrow is pointed at the center of target.boolean | { pointAtCenter: boolean }true5.2.0
autoAdjustOverflowWhether to adjust popup placement automatically when popup is off screenbooleantrue
colorThe background colorstring-4.3.0
defaultOpenWhether the floating tooltip card is open by defaultbooleanfalse4.23.0
destroyTooltipOnHideWhether destroy dom when closebooleanfalse
destroyOnHiddenWhether destroy dom when closebooleanfalse5.25.0
freshTooltip will cache content when it is closed by default. Setting this property will always keep updatingbooleanfalse5.10.0
getPopupContainerThe DOM container of the tip, the default behavior is to create a div element in body(triggerNode: HTMLElement) => HTMLElement() => document.body
mouseEnterDelayDelay in seconds, before tooltip is shown on mouse enternumber0.1
mouseLeaveDelayDelay in seconds, before tooltip is hidden on mouse leavenumber0.1
overlayClassNameClass name of the tooltip card, please use classNames={{ root: '' }} insteadstring-
overlayStyleStyle of the tooltip card, please use styles={{ root: {} }}React.CSSProperties-
overlayInnerStyleStyle of the tooltip inner content, please use styles={{ body: {} }}React.CSSProperties-
placementThe position of the tooltip relative to the target, which can be one of top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottomstringtop
triggerTooltip trigger mode. Could be multiple by passing an arrayhover | focus | click | contextMenu | Array<string>hover
openWhether the floating tooltip card is open or not. Use visible under 4.23.0 (why?)booleanfalse4.23.0
zIndexConfig z-index of Tooltipnumber-
onOpenChangeCallback executed when visibility of the tooltip card is changed(open: boolean) => void-4.23.0

Semantic DOM

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
zIndexPopupz-index of Popconfirmnumber1060
Global TokenHow to use?

FAQ

The following FAQ applies to Tooltip, Popconfirm, Popover components.

Why does the warning 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-c5hy96
  • Using forwardRef to fix: https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs

Why is the tooltip for my custom component not opening?

Similar 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.

What's the placement logic?

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:

shift

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 Shift

Auto adjust Popup and arrow position when Popconfirm is close to the edge of the screen. Will be out of screen when exceed limitation.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Basic

The basic example supports the title and description props of confirmation.

description is supported in version 5.1.0.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Placement

There are 12 placement options available. Use arrow: { pointAtCenter: true } if you want the arrow to point at the center of target.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Conditional trigger

Make it pop up under some conditions.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Asynchronously close

Asynchronously close a popconfirm when a the OK button is pressed. For example, you can use this pattern when you submit a form.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Locale text

Set okText and cancelText props to customize the button's labels.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Customize icon

Set icon props to customize the icon.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Asynchronously close on Promise

Asynchronously close a popconfirm when the OK button is pressed. For example, you can use this pattern when you submit a form.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code


Whether directly execute:
  • root
    5.23.0
    Root element (including arrows, content elements)
  • body
    5.23.0
    Body element