The floating card popped by clicking or hovering.
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.
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.
Please ensure that the child node of Popover accepts onMouseEnter, onMouseLeave, onFocus, onClick events.
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| minWidth | Min width of Popover | number | 177 |
| width | Width of Popover | number | 177 |
| zIndexPopup | z-index of Popover | number | 1030 |
Please ref Tooltip FAQ.
The most basic example. The size of the floating layer depends on the contents region.
There are 12 placement options available.
Use open prop to control the display of the card.
Mouse to click, focus and move in.
Hide arrow by arrow.
The following example shows how to create a popover which can be hovered and clicked.
