CODEWITHSUNDEEP
reactjstypescriptantd
syydi
syydi

Reputation: 191

How to add tooltip to Ant Design Menu after 4.20.0?

From Ant Design docs:

After version 4.20.0, we provide a simpler usage <Menu items={[...]} /> with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 5.0.

I would like to show a tooltip when hovering an item in the menu:

<Menu
    items={[
        { key: 'key1', label: 'Option 1' },
        { key: 'key2', label: 'Option 2', disabled: isDisabled }, // Show tooltip on hover when disabled
    ]}
    onClick={handleMenuClick}
/>

How can I do this?

Upvotes: 0

Views: 1096

Answers (1)

Scratch&#39;N&#39;Purr
Scratch&#39;N&#39;Purr

Reputation: 10409

If you refer to the ItemType docs, you'll see that label is a ReactNode type. Add your tooltip there:

<Menu
  onClick={onClick}
  selectedKeys={[current]}
  mode="horizontal"
  items={[
    {
      label: <Tooltip title="menu one">Menu One</Tooltip>,
      key: "one"
    },
    {
      label: <Tooltip title="menu two">Menu Two</Tooltip>,
      key: "two"
    },
    {
      label: <Tooltip title="menu three">Menu Three</Tooltip>,
      key: "three"
    }
  ]}
/>

DEMO

Upvotes: 2

Related Questions