Css Antd将工具提示应用于非折叠侧的菜单项

我试图复制一个折叠的

Sider

，而不声明

collapsed={true}

纯粹是为了产生工具提示效果

问题是当我在

工具提示中换行
菜单项
时，它似乎不再被定义，并且特殊触发器也没有出现

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Layout, Menu, Icon, Tooltip } from "antd";
import { sidebar } from "./nav";

const { Header, Sider, Content } = Layout;

class SiderDemo extends React.Component {
  state = {
    collapsed: false
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed
    });
  };

  render() {
    return (
      <Layout>
        <Sider trigger={null} collapsible collapsedWidth="0" breakpoint="sm">
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
            {sidebar.map(menu => (
              <Tooltip placement="right" title={menu.name}>
                <Menu.Item
                  style={{ borderRadius: 2, width: "72px" }}
                  item={menu.name}
                  key={menu.key}
                >
                  <Icon type={menu.icon} />
                </Menu.Item>
              </Tooltip>
            ))}
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: "#fff", padding: 0 }}>
            <Icon
              className="trigger"
              type={this.state.collapsed ? "menu-unfold" : "menu-fold"}
              onClick={this.toggle}
            />
          </Header>
          <Content
            style={{
              margin: "24px 16px",
              padding: 24,
              background: "#fff",
              minHeight: 280
            }}
          >
            Content
          </Content>
        </Layout>
      </Layout>
    );
  }
}

ReactDOM.render(<SiderDemo />, document.getElementById("container"));

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{布局、菜单、图标、工具提示}；
从“/nav”导入{sidebar}；
const{Header，Sider，Content}=布局；
类SiderDemo扩展了React.Component{
状态={
失败：错误
};
切换=（）=>{
这是我的国家({
折叠：！this.state.collapsed
});
};
render（）{
返回(
{sidebar.map（菜单=>(
))}
内容
);
}
}
render（，document.getElementById（“容器”）；

将
工具提示
移到内部，并将
菜单项
的
图标
。我发现这是最快的方法


目前，您的代码无法工作，因为
菜单
要求其子项仅为
菜单项类型的

因此，您需要添加一个与
菜单项
宽度相同的包装


//v删除触发器={null}以使触发器出现
{sidebar.map（菜单=>(
//v包装
))}

我知道这是可行的，但是，我之所以问这个问题，是因为我希望鼠标悬停在Menu.Item上时出现工具提示，而不是图标。@Freddy。我更新了代码。这就是你要找的吗？嘿，你是怎么录gif的？您使用的是哪个操作系统？我使用“ScreenToGif”。我在windows 10上。@当您将鼠标悬停在不同的屏幕大小上时，blueseal的工具提示似乎停止工作。Dennis，你能回答一下为什么边栏上没有出现特殊触发器图标吗？我不明白当断点上collapsedWidth=0时，触发器应该出现在哪个特殊触发器上，因为你设置了
trigger={null}
，检查更新的沙盒，我没有看到。当您将鼠标悬停在不同的屏幕大小上时，工具提示似乎停止工作。
   {sidebar.map(menu => (
              <Menu.Item
                style={{ borderRadius: 2, width: "72px" }}
                item={menu.name}
                key={menu.key}
              >
                <Tooltip
                  placement="right"
                  title={menu.name}
                  className="tooltip"
                >
                  <div className="my-icon-wrapper test">
                    <Icon type={menu.icon} />
                  </div>
                </Tooltip>
              </Menu.Item>
            ))}

.my-icon-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.test {
  border: 1px solid red;
}

//    v remove the trigger={null} for trigger to appear
<Sider collapsible collapsedWidth="0" breakpoint="sm">


<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
  {sidebar.map(menu => (
    <Menu.Item item={menu.name} key={menu.key}>
      <Tooltip placement="right" title={menu.name}>
//                       v Wrapper
        <div style={{ width: '100%' }}>
          <Icon type={menu.icon} />
        </div>
      </Tooltip>
    </Menu.Item>
  ))}
</Menu>