2.5 KiB
| category | group | title | description | cover | coverDark | demo | ||
|---|---|---|---|---|---|---|---|---|
| Components | Data Display | Popover | The floating card pops up when clicking/mouse hovering over an element. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*kfW5RrfF4L8AAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*6b8fSKVVtXIAAAAAAAAAAAAADrJ8AQ/original |
|
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
Three ways to trigger
Placement
Arrow
Auto Shift
Controlling the close of the dialog
Hover with click popover
_InternalPanelDoNotUseOrYouWillBeFired
Wireframe
Component Token
API
Common props ref：Common props
| Param | Description | Type | Default value | Version |
|---|---|---|---|---|
| content | Content of the card | ReactNode | () => ReactNode | - | |
| title | Title of the card | ReactNode | () => 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
FAQ
Why does the warning findDOMNode is deprecated some times 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.
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.