logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.9.2
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • 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
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic
Three ways to trigger
Placement
Arrow
Controlling the close of the dialog
Hover with click popover
API
Note
Design Token
FAQ

Popover

  • ListQRCode

    Resources

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

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    The floating card popped by clicking or hovering.

    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-

    Consult Tooltip's documentation to find more APIs.

    Note

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

    Design Token

    Component TokenHow to use?

    Token NameDescriptionTypeDefault Value
    minWidthMin width of Popovernumber177
    widthWidth of Popovernumber177
    zIndexPopupz-index of Popovernumber1030

    Global TokenHow to use?

    FAQ

    Please ref Tooltip FAQ.

    Basic

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

    expand codeexpand code
    Placement

    There are 12 placement options available.

    expand codeexpand code
    Controlling the close of the dialog

    Use open prop to control the display of the card.

    expand codeexpand code
    Three ways to trigger

    Mouse to click, focus and move in.

    expand codeexpand code
    Arrow

    Hide arrow by arrow.

    expand codeexpand code
    Hover with click popover

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

    expand codeexpand code
    Content