Back to Ant Design

SharedFAQ.Zh CN

components/tooltip/shared/sharedFAQ.zh-CN.md

6.3.72.6 KB
Original Source

<Antd component="Alert" title="以下常见问题均适用于 Tooltip、Popconfirm、Popover 组件" type="warning" banner="true"></Antd>

为何在严格模式中有时候会出现 findDOMNode is deprecated 这个警告?

这是由于 @rc-component/trigger 的实现方式导致的,@rc-component/trigger 强制要求 children 能够接受 ref,否则就会 fallback 到 findDOMNode,所以 children 需要是原生 html 标签,如果不是,则需要使用 React.forwardRefref 透传到原生 html 标签。

为什么自定义子组件无法正常工作?

类似问题: #15909, #12812

请确保子元素能接受 onMouseEnteronMouseLeaveonPointerEnteronPointerLeaveonFocusonClick 事件。参考示例

placement 的行为逻辑是什么?

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

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

如何支持键盘无障碍访问?

Tooltip 等组件的默认触发方式(trigger)为 hover,不包含 focus,因此无法响应键盘聚焦事件。如果你希望组件支持键盘操作,可以通过以下方式开启:

  • 单个组件开启:将 trigger 属性设置为包含 focus 的值,例如 trigger="focus"trigger={['hover', 'focus']}
  • 全局开启:通过 ConfigProvider 进行全局配置,这样应用内的所有相关组件都会默认支持键盘聚焦触发。
jsx
import { ConfigProvider, Tooltip, Button } from 'antd';

// 单个组件
<Tooltip trigger={['hover', 'focus']} title="Title">
  <Button>Button</Button>
</Tooltip>

// 全局配置
<ConfigProvider
  tooltip={{ trigger: ['hover', 'focus'] }}
  popover={{ trigger: ['hover', 'focus'] }}
  popconfirm={{ trigger: ['hover', 'focus'] }}
>
  <App />
</ConfigProvider>