React+Antd：如何实现禁用按钮Hover时显示Tooltip？

你遇到的核心问题是禁用状态的Button会阻止鼠标事件触发，导致Tooltip的hover逻辑无法生效，同时你设置的visible={!isEnable}会强制Tooltip显示，不符合hover触发的需求。

修复方案 #

1. 移除visible属性，让Tooltip恢复默认的hover触发逻辑
2. 给Tooltip添加disabled={isEnable}，实现按钮启用时禁用Tooltip，禁用时允许触发
3. 给包裹Button的span设置pointer-events: auto，确保鼠标事件能被捕获（因为禁用Button自带pointer-events: none）

完整代码 #

import React from 'react';
import { Button, Tooltip, Space } from 'antd';

const text = <span>prompt text</span>;
const isEnable = false;

const App = () => (
  <div>
    <Space>
      <Button>Hi</Button>
      <Tooltip 
        placement="bottom" 
        title={text} 
        trigger="hover"
        disabled={isEnable}
      >
        <span style={{ pointerEvents: 'auto' }}>
          <Button disabled={!isEnable}>
            <Space>
              <span>Hello</span>
            </Space>
          </Button>
        </span>
      </Tooltip>
    </Space>
  </div>
);

export default App;

逻辑说明 #

• disabled={isEnable}：当按钮处于启用状态（isEnable=true），Tooltip被禁用，不会响应任何hover操作；当按钮禁用（isEnable=false），Tooltip可以正常触发hover显示。
• pointer-events: auto：禁用状态的Button会设置pointer-events: none，导致鼠标无法触发hover事件，外层span添加这个样式后，能接收鼠标的hover动作，从而触发Tooltip的显示/隐藏逻辑。
• 移除visible属性：避免强制控制Tooltip的显示状态，让它完全由hover事件和自身的disabled属性控制。

如果isEnable是动态状态（比如用useState管理），切换状态时按钮和Tooltip的逻辑会自动同步，无需额外处理。

内容的提问来源于stack exchange，提问作者Renee