Support passing tooltip content to menu item by tooltipContent prop

src/components/Menu/MenuItem/MenuItem.jsx

@@ -45,6 +45,7 @@ const MenuItem = forwardRef(
       setSubMenuIsOpenByIndex,
       closeMenu,
       useDocumentEventListeners,
+      tooltipContent,
       tooltipPosition,
       tooltipShowDelay,
       isInitialSelectedState,
@@ -209,8 +210,13 @@ const MenuItem = forwardRef(
       };
     }, [children, hasOpenSubMenu]);
 
-    const shouldShowTooltip = isTitleHoveredAndOverflowing || disabled;
-    const tooltipContent = disabled ? disableReason : title;
+    const shouldShowTooltip = isTitleHoveredAndOverflowing || disabled || tooltipContent;
+
+    const finalTooltipContent = useMemo(() => {
+      if (disabled) return disableReason;
+      if (tooltipContent) return tooltipContent;
+      return title;
+    }, [disableReason, disabled, title, tooltipContent]);
 
     return (
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events
@@ -234,7 +240,7 @@ const MenuItem = forwardRef(
         {renderMenuItemIconIfNeeded()}
 
         <Tooltip
-          content={shouldShowTooltip ? tooltipContent : null}
+          content={shouldShowTooltip ? finalTooltipContent : null}
           position={tooltipPosition}
           showDelay={tooltipShowDelay}
         >
@@ -293,6 +299,7 @@ MenuItem.defaultProps = {
   setSubMenuIsOpenByIndex: undefined,
   resetOpenSubMenuIndex: undefined,
   useDocumentEventListeners: false,
+  tooltipContent: undefined,
   tooltipPosition: MenuItem.tooltipPositions.RIGHT,
   tooltipShowDelay: 300,
   onMouseLeave: undefined,
@@ -318,6 +325,7 @@ MenuItem.propTypes = {
   hasOpenSubMenu: PropTypes.bool,
   setSubMenuIsOpenByIndex: PropTypes.func,
   useDocumentEventListeners: PropTypes.bool,
+  tooltipContent: PropTypes.string,
   tooltipPosition: PropTypes.oneOf([
     MenuItem.tooltipPositions.RIGHT,
     MenuItem.tooltipPositions.LEFT,

src/components/Menu/MenuItem/__stories__/MenuItem.stories.js

@@ -66,3 +66,18 @@ export const menuItemOverflowTemplate = args => {
     </Menu>
   );
 };
+
+export const menuItemTooltipTemplate = args => {
+  return (
+    <Menu>
+      <MenuItem title="Menu item with tooltip" tooltipContent="I am tooltip" />
+      <MenuItem title="Disabled menu item with tooltip" disabled={true} disableReason="I am a disabled tooltip" />
+      <MenuItem title="I am a very very very very long text please hover me to get a tooltip" />
+      <MenuItem
+        title="Menu item with bottom tooltip"
+        tooltipContent="I am tooltip"
+        tooltipPosition={MenuItem.tooltipPositions.BOTTOM}
+      />
+    </Menu>
+  );
+};

src/components/Menu/MenuItem/__stories__/MenuItem.stories.mdx

@@ -4,7 +4,9 @@ import {
   menuItemTemplate,
   menuItemStatesTemplate,
   menuItemIconsTemplate,
-  menuItemIconsWithColorsTemplate, menuItemOverflowTemplate
+  menuItemIconsWithColorsTemplate,
+  menuItemOverflowTemplate,
+  menuItemTooltipTemplate
 } from "./MenuItem.stories";
 import MenuItem from "../MenuItem";
 
@@ -16,57 +18,63 @@ export const metaSettings = createStoryMetaSettings({
 
 <Meta
   title="Navigation/Menu/MenuItem"
-  component={ MenuItem }
-  argTypes={ metaSettings.argTypes }
-  decorators={ metaSettings.decorators }
+  component={MenuItem}
+  argTypes={metaSettings.argTypes}
+  decorators={metaSettings.decorators}
 />
 
 <!--- Component documentation -->
 
 # Menu Item
+
 - [Overview](#overview)
 - [Props](#props)
 - [Use cases and examples](#use-cases-and-examples)
 - [Related components](#related-components)
 - [Feedback](#feedback)
 
 ## Overview
+
 Use menu item for drawing one options that displayed inside a menu.
 
 <Canvas>
-  <Story name="Overview" args={{title: "Menu item"}}>
-      { menuItemTemplate.bind({}) }
+  <Story name="Overview" args={{ title: "Menu item" }}>
+    {menuItemTemplate.bind({})}
   </Story>
 </Canvas>
 
 ## Props
-<ArgsTable of={ MenuItem } />
+
+<ArgsTable of={MenuItem} />
 
 ## Variants
+
 ### States
+
 <Canvas>
-  <Story name="States">
-    { menuItemStatesTemplate.bind({}) }
-  </Story>
+  <Story name="States">{menuItemStatesTemplate.bind({})}</Story>
 </Canvas>
 
 ### Icons
+
 <Canvas>
-  <Story name="Icons">
-    { menuItemIconsTemplate.bind({}) }
-  </Story>
+  <Story name="Icons">{menuItemIconsTemplate.bind({})}</Story>
 </Canvas>
 
 ### Icons with colors
+
 <Canvas>
-  <Story name="Icons with colors">
-    { menuItemIconsWithColorsTemplate.bind({}) }
-  </Story>
+  <Story name="Icons with colors">{menuItemIconsWithColorsTemplate.bind({})}</Story>
 </Canvas>
 
 ### Overflow
+
 <Canvas>
-  <Story name="Overflow">
-    { menuItemOverflowTemplate.bind({}) }
-  </Story>
-</Canvas>
+  <Story name="Overflow">{menuItemOverflowTemplate.bind({})}</Story>
+</Canvas>
+
+### Tooltips
+
+<Canvas>
+  <Story name="Tooltip">{menuItemTooltipTemplate.bind({})}</Story>
+</Canvas>