2016-08-26 14:42:41 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: Data Display
2016-09-21 11:28:38 +08:00
title: Popover
2024-03-22 14:22:42 +08:00
description: The floating card pops up when clicking/mouse hovering over an element.
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-08-26 14:42:41 +08:00
---
2016-09-10 13:43:30 +08:00
## When To Use
2016-08-26 14:42:41 +08:00
2016-08-26 15:07:46 +08:00
A simple popup menu to provide extra information or operations.
2016-08-26 14:42:41 +08:00
Comparing with `Tooltip` , besides information `Popover` card can also provide action elements like links and buttons.
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< code src = "./demo/basic.tsx" > Basic< / code >
< code src = "./demo/triggerType.tsx" > Three ways to trigger< / code >
< code src = "./demo/placement.tsx" > Placement< / code >
2023-01-19 11:21:05 +08:00
< code src = "./demo/arrow.tsx" > Arrow< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/control.tsx" > Controlling the close of the dialog< / code >
< code src = "./demo/hover-with-click.tsx" > Hover with click popover< / code >
< code src = "./demo/render-panel.tsx" debug > _InternalPanelDoNotUseOrYouWillBeFired< / code >
2022-12-06 23:14:30 +08:00
< code src = "./demo/wireframe.tsx" debug > Wireframe< / code >
2023-05-25 20:09:48 +08:00
< code src = "./demo/component-token.tsx" debug > Component Token< / code >
2022-11-09 12:28:04 +08:00
2016-08-26 14:42:41 +08:00
## API
2023-08-08 18:27:48 +08:00
Common props ref：
2022-11-17 17:31:26 +08:00
| Param | Description | Type | Default value | Version |
| ------- | ------------------- | ---------------------------- | ------------- | ------- |
| content | Content of the card | ReactNode \| () => ReactNode | - | |
| title | Title of the card | ReactNode \| () => ReactNode | - | |
2016-12-22 12:00:57 +08:00
2022-12-22 14:12:26 +08:00
Consult [Tooltip's documentation ](/components/tooltip/#api ) to find more APIs.
2017-01-22 14:26:46 +08:00
## Note
2017-09-16 11:26:22 +08:00
Please ensure that the child node of `Popover` accepts `onMouseEnter` , `onMouseLeave` , `onFocus` , `onClick` events.
2023-04-11 10:25:24 +08:00
## Design Token
< ComponentTokenTable component = "Popover" > < / ComponentTokenTable >
2023-07-25 11:38:38 +08:00
## FAQ
2024-02-19 13:42:05 +08:00
### Why does the warning findDOMNode is deprecated some times appear in strict mode?
2024-02-19 14:43:43 +08:00
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.
2024-02-19 13:42:05 +08:00
### Why sometime not work on HOC?
Please ensure that the child node of `Tooltip` accepts `onMouseEnter` , `onMouseLeave` , `onPointerEnter` , `onPointerLeave` , `onFocus` , `onClick` events.
For more questions, please refer to [Tooltip FAQ ](/components/tooltip#faq ).
