ant-design/components/tooltip/index.zh-CN.md

category	subtitle	group	title	cover	coverDark	demo
Components	文字提示	数据展示	Tooltip	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3u9eSZO_4c0AAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gwrhTozoTC4AAAAAAAAAAAAADrJ8AQ/original	cols 2

简单的文字提示气泡框。

何时使用

鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。

可用来代替系统默认的 title 提示，提供一个 按钮/文字/操作 的文案解释。

代码演示

基本 位置 箭头展示 贴边偏移 自动调整位置 隐藏后销毁 多彩文字提示 _InternalPanelDoNotUseOrYouWillBeFired Debug 禁用

API

参数	说明	类型	默认值
title	提示文字	ReactNode | () => ReactNode	-

共同的 API

以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。

参数	说明	类型	默认值	版本
align	该值将合并到 placement 的配置中，设置参考 rc-tooltip	object	-
arrow	修改箭头的显示状态以及修改箭头是否指向目标元素中心	boolean | { pointAtCenter: boolean }	true	5.2.0
autoAdjustOverflow	气泡被遮挡时自动调整位置	boolean	true
color	背景颜色	string	-	4.3.0
defaultOpen	默认是否显隐	boolean	false	4.23.0
destroyTooltipOnHide	关闭后是否销毁 Tooltip	boolean	false
getPopupContainer	浮层渲染父节点，默认渲染到 body 上	(triggerNode: HTMLElement) => HTMLElement	() => document.body
mouseEnterDelay	鼠标移入后延时多少才显示 Tooltip，单位：秒	number	0.1
mouseLeaveDelay	鼠标移出后延时多少才隐藏 Tooltip，单位：秒	number	0.1
overlayClassName	卡片类名	string	-
overlayStyle	卡片样式	object	-
overlayInnerStyle	卡片内容区域的样式对象	object	-
placement	气泡框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom	string	top
trigger	触发行为，可选 hover | focus | click | contextMenu，可使用数组设置多个触发行为	string | string[]	hover
open	用于手动控制浮层显隐，小于 4.23.0 使用 visible（为什么?）	boolean	false	4.23.0
zIndex	设置 Tooltip 的 z-index	number	-
onOpenChange	显示隐藏的回调	(open: boolean) => void	-	4.23.0

Design Token

FAQ

为何有时候 HOC 组件无法生效？

请确保 Tooltip 的子元素能接受 onMouseEnter、onMouseLeave、onPointerEnter、onPointerLeave、onFocus、onClick 事件。

placement 的行为逻辑是什么？

当屏幕空间足够时，会按照 placement 的设置进行弹层。当空间不足时则会取反向位置进行弹层（例如 top 不够时，会改为 bottom，topLeft 不够时会改为 bottomLeft）。单一方向如 top bottom left right 当贴边时进行自动位移：

当设置为边缘对齐方向如 topLeft bottomRight 等，则会仅做翻转而不做位移。