Popover
Importimport{ Popover }from"antd"; |
Sourcecomponents/popover |
Importimport{ Popover }from"antd"; |
Sourcecomponents/popover |
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 | - |
Property | Description | Type | Default | Version |
---|---|---|---|---|
align | This value will be merged into placement's config, please refer to the settings dom-align | object | - | |
arrow | Change arrow's visible state and change whether the arrow is pointed at the center of target. | boolean | { pointAtCenter: boolean } | true | 5.2.0 |
autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | true | |
color | The background color | string | - | 4.3.0 |
defaultOpen | Whether the floating tooltip card is open by default | boolean | false | 4.23.0 |
destroyTooltipOnHide | Whether destroy tooltip when hidden | boolean | false | |
fresh | Tooltip will cache content when it is closed by default. Setting this property will always keep updating | boolean | false | 5.10.0 |
getPopupContainer | The DOM container of the tip, the default behavior is to create a div element in body | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 | |
mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 | |
overlayClassName | Class name of the tooltip card | string | - | |
overlayStyle | Style of the tooltip card | React.CSSProperties | - | |
overlayInnerStyle | Style of the tooltip inner content | React.CSSProperties | - | |
placement | The position of the tooltip relative to the target, which can be one of top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom | string | top | |
trigger | Tooltip trigger mode. Could be multiple by passing an array | hover | focus | click | contextMenu | Array<string> | hover | |
open | Whether the floating tooltip card is open or not. Use visible under 4.23.0 (why?) | boolean | false | 4.23.0 |
zIndex | Config z-index of Tooltip | number | - | |
onOpenChange | Callback executed when visibility of the tooltip card is changed | (open: boolean) => void | - | 4.23.0 |
Please ensure that the child node of Popover
accepts onMouseEnter
, onMouseLeave
, onFocus
, onClick
events.
Token Name | Description | Type | Default Value |
---|---|---|---|
titleMinWidth | Min width of Popover title | string | number | 177 |
zIndexPopup | z-index of Popover | number | 1030 |
findDOMNode is deprecated
sometimes 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.
findDOMNode is deprecated
reproduce: https://codesandbox.io/p/sandbox/finddomnode-c5hy96forwardRef
to fix: https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczsPlease ensure that the child node of Tooltip
accepts onMouseEnter
, onMouseLeave
, onPointerEnter
, onPointerLeave
, onFocus
, onClick
events.
For more questions, please refer to Tooltip FAQ.
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content