Ant Design 4.20.0及以上版本如何为Menu组件添加Tooltip？

针对你使用Ant Design 4.20.0+版本的Menu items={[...]}新写法，要给菜单选项（尤其是禁用项）添加悬停Tooltip，直接在items的label字段中嵌套Tooltip组件即可，具体实现如下：

基础实现方式 #

1. 首先引入Tooltip组件：

import { Menu, Tooltip } from 'antd';

2. 修改items数组，将需要添加Tooltip的选项的label替换为Tooltip包裹的内容：

<Menu
    items={[
        { 
            key: 'key1', 
            label: (
                <Tooltip title="这是选项1的提示文本">
                    Option 1
                </Tooltip>
            )
        },
        { 
            key: 'key2', 
            // 仅当选项禁用时显示Tooltip
            label: isDisabled ? (
                <Tooltip title="该选项已禁用，无法点击">
                    Option 2
                </Tooltip>
            ) : 'Option 2',
            disabled: isDisabled 
        },
    ]}
    onClick={handleMenuClick}
/>

批量处理优化 #

如果需要给多个菜单项统一添加Tooltip逻辑，可以抽离成渲染函数，减少重复代码：

// 自定义渲染菜单标签的函数
const renderMenuLabel = (label, disabled, tooltipText) => {
    // 若传入了tooltipText则显示，否则默认用label作为提示
    const tipText = tooltipText || (disabled ? '该选项不可用' : label);
    return (
        <Tooltip title={tipText}>
            {label}
        </Tooltip>
    );
};

// 使用时：
<Menu
    items={[
        { 
            key: 'key1', 
            label: renderMenuLabel('Option 1', false, '查看选项详情')
        },
        { 
            key: 'key2', 
            label: renderMenuLabel('Option 2', isDisabled),
            disabled: isDisabled 
        },
    ]}
    onClick={handleMenuClick}
/>

这种方式完全兼容Ant Design的新写法，不会触发废弃提示，同时能满足悬停显示Tooltip的需求。

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