Antd 5.22.x+React19折叠菜单点击时隐藏空标签弹窗问题

问题原因 #

Antd折叠状态下的内联菜单，默认会将菜单项的label作为tooltip内容展示。当菜单项未设置label时，tooltip会渲染为空容器，导致点击时出现空弹窗。

解决方案 #

1. 给无label的菜单项显式设置tooltipTitle: null

直接在无标签的菜单项配置中添加tooltipTitle: null，告知组件不需要显示tooltip：

const bottomItems: MenuItem[] = useMemo(
    () => [
      {
        key: 'bottom0',
        icon: <ReloadOutlined />,
        onClick: () => window.location.reload(),
        tooltipTitle: null
      },
      {
        key: 'bottom1',
        icon: <LanguageSelector />,
        tooltipTitle: null
      },
      {
        label: user?.name,
        key: 'bottom2',
        icon: <UserOutlined />,
      },
      {
        key: 'bottom3',
        icon: <OnlineIndicator />,
        tooltipTitle: null
      },
      {
        key: 'bottom4',
        icon: <LogoutOutlined />,
        onClick: logout,
        tooltipTitle: null
      },
    ] satisfies MenuItem[],
    [logout, user?.name]
  )

2. 用CSS强制隐藏空tooltip

如果不想修改菜单配置，可通过CSS选择器定位空tooltip容器并隐藏：

/* 隐藏折叠菜单的空tooltip内容 */
.ant-menu-inline-collapsed .ant-tooltip-inner:empty {
  display: none;
}
/* 同步隐藏tooltip箭头 */
.ant-menu-inline-collapsed .ant-tooltip-arrow {
  display: none;
}

若样式不生效，可适当提升选择器优先级（比如添加父容器类名）。

3. 全局配置Menu的tooltipProps

通过Menu组件的tooltipProps统一处理所有菜单项的tooltip，自动过滤空内容：

<Menu
  theme="dark"
  mode="inline"
  style={{ marginTop: 'auto' }}
  items={bottomItems}
  selectable={false}
  tooltipProps={{
    // 自定义tooltip内容，为空时返回null
    title: (originalTitle) => originalTitle || null
  }}
/>

该方法会对所有菜单项生效，无需逐个修改配置。

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