2016-03-31 14:17:09 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: 数据展示
2016-09-21 11:28:38 +08:00
title: Popover
2024-03-22 14:22:42 +08:00
subtitle: 气泡卡片
description: 点击/鼠标移入元素，弹出气泡式的卡片浮层。
2024-01-29 14:50:36 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*kfW5RrfF4L8AAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*6b8fSKVVtXIAAAAAAAAAAAAADrJ8AQ/original
2022-11-09 12:28:04 +08:00
demo:
cols: 2
2016-03-31 14:17:09 +08:00
---
2015-06-15 22:01:39 +08:00
2015-06-17 16:58:13 +08:00
## 何时使用
2015-07-20 11:08:23 +08:00
当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
2015-06-17 16:58:13 +08:00
2015-06-17 19:15:37 +08:00
和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。
2015-06-17 16:58:13 +08:00
2022-11-09 12:28:04 +08:00
## 代码演示
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< code src = "./demo/basic.tsx" > 基本< / code >
< code src = "./demo/triggerType.tsx" > 三种触发方式< / code >
< code src = "./demo/placement.tsx" > 位置< / code >
2023-01-19 11:21:05 +08:00
< code src = "./demo/arrow.tsx" > 箭头展示< / code >
2024-08-12 11:56:29 +08:00
< code src = "./demo/arrow-point-at-center.tsx" debug > Arrow.pointAtCenter< / code >
2024-07-11 10:03:12 +08:00
< code src = "./demo/shift.tsx" iframe = "300" > 贴边偏移< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/control.tsx" > 从浮层内关闭< / code >
< code src = "./demo/hover-with-click.tsx" > 悬停点击弹出窗口< / code >
< code src = "./demo/render-panel.tsx" debug > _InternalPanelDoNotUseOrYouWillBeFired< / code >
2022-12-06 23:14:30 +08:00
< code src = "./demo/wireframe.tsx" debug > 线框风格< / code >
2023-05-25 20:09:48 +08:00
< code src = "./demo/component-token.tsx" debug > 组件 Token< / code >
2022-11-09 12:28:04 +08:00
2015-06-17 16:58:13 +08:00
## API
2023-08-08 18:27:48 +08:00
通用属性参考：[通用属性](/docs/react/common-props)
2022-11-17 17:31:26 +08:00
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------- | -------- | ---------------------------- | ------ | ---- |
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
2016-12-22 12:00:57 +08:00
2022-12-22 14:12:26 +08:00
更多属性请参考 [Tooltip ](/components/tooltip-cn/#api )。
2017-01-22 14:26:46 +08:00
## 注意
2017-01-22 15:05:32 +08:00
请确保 `Popover` 的子元素能接受 `onMouseEnter` 、`onMouseLeave`、`onFocus`、`onClick` 事件。
2023-04-11 10:25:24 +08:00
2023-08-30 23:02:35 +08:00
## 主题变量（ ）
2023-04-11 10:25:24 +08:00
< ComponentTokenTable component = "Popover" > < / ComponentTokenTable >
2023-07-25 11:38:38 +08:00
## FAQ
2024-02-19 13:42:05 +08:00
### 为何在严格模式中有时候会出现 findDOMNode is deprecated 这个警告？
这是由于 `rc-trigger` 的实现方式导致的，`rc-trigger` 强制要求 children 能够接受 ref， ， `React.forwardRef` 把 `ref` 透传到原生 html 标签。
### 为何有时候 HOC 组件无法生效？
请确保 `Popover` 的子元素能接受 `onMouseEnter` 、`onMouseLeave`、`onPointerEnter`、`onPointerLeave`、`onFocus`、`onClick` 事件。
2024-06-20 14:22:00 +08:00
更多问题，请参考 [Tooltip FAQ ](/components/tooltip-cn#faq )。
