logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.26.0
  • 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
When To Use
Examples
Basic
Locale text
Placement
Auto Shift
Conditional trigger
Customize icon
Asynchronously close
Asynchronously close on Promise
API
Semantic DOM
Design Token
FAQ
Why does the warning findDOMNode is deprecated sometimes appear in strict mode?
Why is the tooltip for my custom component not opening?
What's the placement logic?

Popconfirm

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

    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