logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.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

Popover

The floating card pops up when clicking/mouse hovering over an element.
Importimport { Popover } from "antd";
Sourcecomponents/popover
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 popup menu to provide extra information or operations.

Comparing with Tooltip, besides information Popover card can also provide action elements like links and buttons.

Examples

API

Common props ref:Common props

ParamDescriptionTypeDefault valueVersion
contentContent of the cardReactNode | () => ReactNode-
titleTitle of the cardReactNode | () => ReactNode-
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

Note

Please ensure that the child node of Popover accepts onMouseEnter, onMouseLeave, onFocus, onClick events.

Semantic DOM

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
titleMinWidthMin width of Popover titlestring | number177
zIndexPopupz-index of Popovernumber1030
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 Popover is close to the edge of the screen. Will be out of screen when exceed limitation.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Basic

The most basic example. The size of the floating layer depends on the contents region.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Placement

There are 12 placement options available.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Hover with click popover

The following example shows how to create a popover which can be hovered and clicked.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Three ways to trigger

Mouse to click, focus and move in.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Arrow

Hide arrow by arrow.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Controlling the close of the dialog

Use open prop to control the display of the card.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • root
    5.23.0
    Root element (including arrows, content elements)
  • body
    5.23.0
    Body element