mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 21:28:09 +08:00
4dbb0075bb
* docs: split shardProps * chore: update english * chore: update style * chore: update snap
3.8 KiB
3.8 KiB
| category | group | title | subtitle | description | cover | coverDark | demo | ||
|---|---|---|---|---|---|---|---|---|---|
| Components | 数据展示 | Tooltip | 文字提示 | 简单的文字提示气泡框。 | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*9LKlRbWytugAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*bCbPTJ7LQngAAAAAAAAAAAAADrJ8AQ/original |
|
何时使用
鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
可用来代替系统默认的 title 提示，提供一个 按钮/文字/操作 的文案解释。
代码演示
基本
位置
箭头展示
贴边偏移
自动调整位置
隐藏后销毁
多彩文字提示
_InternalPanelDoNotUseOrYouWillBeFired
Debug
禁用
禁用子元素
API
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 提示文字 | ReactNode | () => ReactNode | - |
共同的 API
主题变量（Design Token）
FAQ
为何在严格模式中有时候会出现 findDOMNode is deprecated 这个警告？
这是由于 rc-trigger 的实现方式导致的，rc-trigger 强制要求 children 能够接受 ref，否则就会 fallback 到 findDOMNode，所以 children 需要是原生 html 标签，如果不是，则需要使用 React.forwardRef 把 ref 透传到原生 html 标签。
findDOMNode is deprecated重现：https://codesandbox.io/p/sandbox/finddomnode-c5hy96- 使用
forwardRef消除警告：https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs
为何有时候 HOC 组件无法生效？
请确保 Tooltip 的子元素能接受 onMouseEnter、onMouseLeave、onPointerEnter、onPointerLeave、onFocus、onClick 事件。
placement 的行为逻辑是什么？
当屏幕空间足够时，会按照 placement 的设置进行弹层。当空间不足时则会取反向位置进行弹层（例如 top 不够时，会改为 bottom，topLeft 不够时会改为 bottomLeft）。单一方向如 top bottom left right 当贴边时进行自动位移：
当设置为边缘对齐方向如 topLeft bottomRight 等，则会仅做翻转而不做位移。
为何 Tooltip 的内容在关闭时不会更新？
Tooltip 默认在关闭时会缓存内容，以防止内容更新时出现闪烁：
// `title` 不会因为 `user` 置空而闪烁置空
<Tooltip open={user} title={user?.name} />
如果需要在关闭时也更新内容，可以设置 fresh 属性（例如 #44830 中的场景）：
<Tooltip open={user} title={user?.name} fresh />
