Layout 菜单建议增加 API 可以隐藏 tooltip 提示

[hihuangwei]

What problem does this feature solve?

Layout 菜单建议增加 API 可以隐藏 tooltip 提示

#6457

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

感谢您对 antd 的关注。根据您提供的信息，您希望在 Layout 菜单中增加一个 API 来隐藏 tooltip 提示。

目前，antd 中的 Tooltip 是独立的组件，如果您想隐藏 Tooltip，可以使用相关 API，如下所示：

import { Tooltip } from 'antd';

<Tooltip title="这是提示信息" visible={false}>
  <span>鼠标滑过此处会显示 Tooltip 提示</span>
</Tooltip>

在 Layout 菜单组件中，绝大部分的 Tooltip 都是通过这种方式来实现的。因此，您可以根据需要在对应的地方使用 visible={false} 来隐藏 Tooltip 提示。

如果您需要更具体的操作方法，可以在 antd 的 GitHub 仓库中提交 issue，提供您的解决方案和建议。

相关文档：

• antd Tooltip

[StringKe]

比较需要这个功能，希望官方跟进一下。

或者提供自定义的方式？

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

如果您需要全局隐藏 Layout 菜单组件中的 Tooltip 提示，您可以考虑对 antd 进行局部修改。首先，您需要克隆 antd 仓库的代码，然后进入 src/components/layout/Menu.tsx 文件，在第 23 行附近的 MenuItem 组件定义中，找到 Tooltip 部分，将其修改为如下代码：

{
  /* 原代码（注释掉） */
  /*
  <Tooltip
    title={child.props.name}
    placement="right"
    overlayClassName={`${prefixCls}-inline-collapsed-tooltip`}
    getPopupContainer={getPopupContainer || getMenuContainer}
  >
    {child}
  </Tooltip>
  */
}

{
  /* 新代码（不使用 Tooltip 组件） */
  {child}
}

然后，您需要在 antd 仓库的 package.json 文件中添加 patch 声明，如下所示：

{
  "name": "antd",
  "version": "x.y.z",
  "patches": {
    "components/layout/Menu.tsx": "./patches/components/layout/Menu.tsx.patch"
  }
}

接下来，在 antd 仓库根目录下创建 patches/components/layout/Menu.tsx.patch 文件，文件内容为修改的具体代码：

diff --git a/src/components/layout/Menu.tsx b/src/components/layout/Menu.tsx
index 778f5e5f5..5c5b65705 100644
--- a/src/components/layout/Menu.tsx
+++ b/src/components/layout/Menu.tsx
@@ -20,7 +20,6 @@ export default function ({ className, ...props }: MenuProps) {
         if (!item) {
           return null;
         }
-        const tooltipTitle = item.props.name;
         const key = getKey(menuItemIndex);
         const childPath = getPath(item.props);
         const childProps = { ...item.props, key, onClick: e => { if (item.props.onClick) { item.props.onClick(e); } /* close menu */ setVisible(false); }};
@@ -31,11 +30,7 @@ export default function ({ className, ...props }: MenuProps) {
         const cls = classNames({ [`${prefixCls}-submenu-title`]: true, [`${prefixCls}-submenu-title-disabled`]: disabled, [`${prefixCls}-submenu-title-selected`]: active });
         let popupPlacement = 'rightTop';
         if (level >= SUB_MENU_PADDING_LEFT) {
-          popupPlacement = 'leftTop';
-        }
-
-        return (
-          <Tooltip title={tooltipTitle} placement={popupPlacement} overlayClassName={`${prefixCls}-inline-collapsed-tooltip`} getPopupContainer={getPopupContainer || getMenuContainer}>
-            {child}
-          </Tooltip>
-        );
+          popupPlacement = 'leftTop'
+        };
+        return child;
+      })()
       }
     </MenuContext.Provider>
   );

最后，您需要执行 yarn install 安装相关依赖，并使用 yarn patch-package antd 命令来生成补丁包。

这样，您就修改了 antd 中的 Layout 菜单组件，并在您的项目中使用局部安装的 antd 版本即可实现全局隐藏 Tooltip 提示，而不会影响其他地方的 Tooltip。