Ant Design Tree组件如何禁用或自定义悬浮提示？

一、禁用默认Tooltip #

有两种可靠方式可以禁用Tree节点的默认溢出提示：

1. 自定义节点标题（推荐）
   通过Tree组件的renderTitle属性完全接管节点标题的渲染，返回不带Tooltip的元素，从根源上避免默认Tooltip生成：

import { Tree } from 'antd';

const treeData = [/* 你的树数据 */];

<Tree
  treeData={treeData}
  renderTitle={(node) => (
    <span>{node.title}</span>
  )}
/>

如果需要保留文本溢出省略效果，只需给span添加对应样式：

renderTitle={(node) => (
  <span style={{ 
    whiteSpace: 'nowrap', 
    overflow: 'hidden', 
    textOverflow: 'ellipsis' 
  }}>
    {node.title}
  </span>
)}

2. 强制CSS隐藏
   若自定义标题的方式不适用，可以通过高优先级CSS选择器强制隐藏默认Tooltip。注意要使用!important覆盖组件内置样式：

/* 隐藏Tree节点的Tooltip容器 */
.ant-tooltip-tree-node {
  display: none !important;
}

/* 或者针对节点hover时的Tooltip触发状态 */
.ant-tree-node-content-wrapper:hover .ant-tooltip-open {
  display: none !important;
}

如果之前的全局CSS未生效，大概率是选择器优先级不足，可尝试添加父容器类名提升优先级，比如：

.your-tree-container .ant-tooltip-tree-node {
  display: none !important;
}

二、自定义Tooltip #

如果需要替换默认提示内容或样式，同样通过renderTitle结合Ant Design的Tooltip组件实现完全自定义：

import { Tree, Tooltip } from 'antd';

<Tree
  treeData={treeData}
  renderTitle={(node) => (
    <Tooltip 
      title={`自定义提示内容：${node.title}`}
      placement="top"
      overlayStyle={{ backgroundColor: '#2f54eb', color: '#fff' }}
    >
      <span style={{ 
        whiteSpace: 'nowrap', 
        overflow: 'hidden', 
        textOverflow: 'ellipsis' 
      }}>
        {node.title}
      </span>
    </Tooltip>
  )}
/>

可以根据需求调整Tooltip的placement（位置）、overlayStyle（弹窗样式）、trigger（触发方式）等属性，完全掌控提示的表现。

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