logoNamu Design

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

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu 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 Namu Design
    Medium
    Twitter
    yuqueNamu Design in YuQue
    Namu 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 Namu 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

    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

    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 Token

    Global Token

    FAQ

    Please ref Tooltip FAQ.

    Content