[Tooltip] Add undefined, null or false in title (mui#34289)

docs/pages/material-ui/api/tooltip.json

@@ -1,7 +1,6 @@
 {
   "props": {
     "children": { "type": { "name": "custom", "description": "element" }, "required": true },
-    "title": { "type": { "name": "node" }, "required": true },
     "arrow": { "type": { "name": "bool" } },
     "classes": { "type": { "name": "object" } },
     "components": {
@@ -48,6 +47,7 @@
         "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
       }
     },
+    "title": { "type": { "name": "node" } },
     "TransitionComponent": { "type": { "name": "elementType" }, "default": "Grow" },
     "TransitionProps": { "type": { "name": "object" } }
   },

docs/translations/api-docs/tooltip/tooltip-pt.json

@@ -25,7 +25,7 @@
     "PopperComponent": "The component used for the popper.",
     "PopperProps": "Props applied to the <a href=\"/material-ui/api/popper/\"><code>Popper</code></a> element.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "title": "Tooltip title. Zero-length titles string are never displayed.",
+    "title": "Tooltip title. Zero-length titles string, undefined, null and false are never displayed.",
     "TransitionComponent": "The component used for the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component.",
     "TransitionProps": "Props applied to the transition element. By default, the element is based on this <a href=\"http://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component."
   },

docs/translations/api-docs/tooltip/tooltip-zh.json

@@ -25,7 +25,7 @@
     "PopperComponent": "The component used for the popper.",
     "PopperProps": "Props applied to the <a href=\"/material-ui/api/popper/\"><code>Popper</code></a> element.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "title": "Tooltip title. Zero-length titles string are never displayed.",
+    "title": "Tooltip title. Zero-length titles string, undefined, null and false are never displayed.",
     "TransitionComponent": "The component used for the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component.",
     "TransitionProps": "Props applied to the transition element. By default, the element is based on this <a href=\"http://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component."
   },

docs/translations/api-docs/tooltip/tooltip.json

@@ -25,7 +25,7 @@
     "PopperComponent": "The component used for the popper.",
     "PopperProps": "Props applied to the <a href=\"/material-ui/api/popper/\"><code>Popper</code></a> element.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "title": "Tooltip title. Zero-length titles string are never displayed.",
+    "title": "Tooltip title. Zero-length titles string, undefined, null and false are never displayed.",
     "TransitionComponent": "The component used for the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component.",
     "TransitionProps": "Props applied to the transition element. By default, the element is based on this <a href=\"http://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component."
   },

packages/mui-material/src/Tooltip/Tooltip.d.ts

@@ -160,9 +160,9 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
    */
   sx?: SxProps<Theme>;
   /**
-   * Tooltip title. Zero-length titles string are never displayed.
+   * Tooltip title. Zero-length titles string, undefined, null and false are never displayed.
    */
-  title: NonNullable<React.ReactNode>;
+  title: React.ReactNode;
   /**
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.

packages/mui-material/src/Tooltip/Tooltip.js

@@ -498,7 +498,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
   const handleRef = useForkRef(children.ref, handleFocusRef);
 
   // There is no point in displaying an empty tooltip.
-  if (title === '') {
+  if (typeof title !== 'number' && !title) {
     open = false;
   }
 
@@ -872,9 +872,9 @@ Tooltip.propTypes /* remove-proptypes */ = {
     PropTypes.object,
   ]),
   /**
-   * Tooltip title. Zero-length titles string are never displayed.
+   * Tooltip title. Zero-length titles string, undefined, null and false are never displayed.
    */
-  title: PropTypes /* @typescript-to-proptypes-ignore */.node.isRequired,
+  title: PropTypes.node,
   /**
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.

packages/mui-material/src/Tooltip/Tooltip.test.js

@@ -89,6 +89,39 @@ describe('<Tooltip />', () => {
       expect(queryByRole('tooltip')).to.equal(null);
     });
 
+    it('should not display if the title is a false', () => {
+      const { queryByRole } = render(
+        <Tooltip title={false} open>
+          <button id="testChild" type="submit">
+            Hello World
+          </button>
+        </Tooltip>,
+      );
+      expect(queryByRole('tooltip')).to.equal(null);
+    });
+
+    it('should not display if the title is a null', () => {
+      const { queryByRole } = render(
+        <Tooltip title={null} open>
+          <button id="testChild" type="submit">
+            Hello World
+          </button>
+        </Tooltip>,
+      );
+      expect(queryByRole('tooltip')).to.equal(null);
+    });
+
+    it('should not display if the title is an undefined', () => {
+      const { queryByRole } = render(
+        <Tooltip title={undefined} open>
+          <button id="testChild" type="submit">
+            Hello World
+          </button>
+        </Tooltip>,
+      );
+      expect(queryByRole('tooltip')).to.equal(null);
+    });
+
     it('should label the child when closed', () => {
       render(
         <Tooltip title="the title">