How to remove the title from Menu antd

user_9556350 0
Viewed 546

I'm using antd for side menus. There showing 2 tooltips. I only want the black background tooltip, want to remove the other. How is it possible? enter image description here

 <div className="menu_area">
                    <Menu
          mode="inline"
          inlineCollapsed={true}
        >
          <Menu.Item key="1" title="Home">
            <Link to="/"  }} />
            <i className="fa fa-home"></i>
          </Menu.Item>

          <Menu.Item key="2" title="Search">
            <Link to="/search"  }} />
            <i className="fa fa-search"></i>
          </Menu.Item>
     <Menu.Item key="3" title="Insurance">
        <Link to="/insurance" }} />
        <i className="fa fa-umbrella"></i>
      </Menu.Item>

</Menu>
</div>
antd reactjs
2 Answers

I found myself a way to solve my issue, I use title in Link with empty value

  <Menu.Item key="3" title="Insurance">
        <Link to="/insurance" title=""}} />
        <i className="fa fa-umbrella"></i>
      </Menu.Item>

This solved my issue.

user_95563500

The white background tooltip is added with title attribute, remove title from Insurance menu and wrap tag in the Tooltip tag to make it work as

import { Tooltip } from 'antd';

<Menu.Item key="3" >   // no title in this tag
     <Link to="/insurance"  }} />
     <Tooltip title="prompt text">
      <i className="fa fa-umbrella"></i>  
     </Tooltip>
     
 </Menu.Item>
user_73441640
Related