title: Antd apply Tooltip to Menu.Item on non collapsed Sider
body: <p>I'm trying to replicate a collapsed <code>Sider</code> without declaring <code>collapsed={true}</code> purely to have the tooltip effect.</p>
  
  <p>The issue is that when I wrap <code>Menu.Item</code> within a <code>Tooltip</code> it seems that it is no longer defined and the special trigger is not appearing</p>
  
  <pre><code>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 = () =&gt; {
      this.setState({
        collapsed: !this.state.collapsed
      });
    };
  
    render() {
      return (
        &lt;Layout&gt;
          &lt;Sider trigger={null} collapsible collapsedWidth="0" breakpoint="sm"&gt;
            &lt;div className="logo" /&gt;
            &lt;Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}&gt;
              {sidebar.map(menu =&gt; (
                &lt;Tooltip placement="right" title={menu.name}&gt;
                  &lt;Menu.Item
                    style={{ borderRadius: 2, width: "72px" }}
                    item={menu.name}
                    key={menu.key}
                  &gt;
                    &lt;Icon type={menu.icon} /&gt;
                  &lt;/Menu.Item&gt;
                &lt;/Tooltip&gt;
              ))}
            &lt;/Menu&gt;
          &lt;/Sider&gt;
          &lt;Layout&gt;
            &lt;Header style={{ background: "#fff", padding: 0 }}&gt;
              &lt;Icon
                className="trigger"
                type={this.state.collapsed ? "menu-unfold" : "menu-fold"}
                onClick={this.toggle}
              /&gt;
            &lt;/Header&gt;
            &lt;Content
              style={{
                margin: "24px 16px",
                padding: 24,
                background: "#fff",
                minHeight: 280
              }}
            &gt;
              Content
            &lt;/Content&gt;
          &lt;/Layout&gt;
        &lt;/Layout&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;SiderDemo /&gt;, document.getElementById("container"));
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/serverless-water-lnjem?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit serverless-water-lnjem"></a></p>