[Snackbar] Add a maxWidth property

docs/src/pages/demos/tooltips/CustomizedTooltips.js

@@ -69,6 +69,9 @@ const styles = theme => ({
       borderStyle: 'solid',
     },
   },
+  button: {
+    margin: theme.spacing.unit,
+  },
 });
 
 class CustomizedTooltips extends React.Component {
@@ -88,10 +91,10 @@ class CustomizedTooltips extends React.Component {
     return (
       <div>
         <Tooltip title="Add">
-          <Button>Default</Button>
+          <Button className={classes.button}>Default</Button>
         </Tooltip>
         <Tooltip title="Add" classes={{ tooltip: classes.lightTooltip }}>
-          <Button>Light</Button>
+          <Button className={classes.button}>Light</Button>
         </Tooltip>
         <Tooltip
           title={
@@ -112,7 +115,7 @@ class CustomizedTooltips extends React.Component {
             },
           }}
         >
-          <Button>Arrow</Button>
+          <Button className={classes.button}>Arrow</Button>
         </Tooltip>
       </div>
     );

docs/src/pages/demos/tooltips/VariableWidth.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
+
+const styles = theme => ({
+  button: {
+    margin: theme.spacing.unit,
+  },
+});
+
+const longText = `
+Aliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus. 
+Praesent non nunc mollis, fermentum neque at, semper arcu. 
+Nullam eget est sed sem iaculis gravida eget vitae justo. 
+`;
+
+function VariableWidth({ classes }) {
+  return (
+    <div>
+      <Tooltip title={longText}>
+        <Button className={classes.button}>Default Width</Button>
+      </Tooltip>
+      <Tooltip title={longText} maxWidth={500}>
+        <Button className={classes.button}>Wraps at 500</Button>
+      </Tooltip>
+      <Tooltip title={longText} maxWidth={0}>
+        <Button className={classes.button}>No wrapping</Button>
+      </Tooltip>
+    </div>
+  );
+}
+
+VariableWidth.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(VariableWidth);

docs/src/pages/demos/tooltips/tooltips.md

@@ -55,3 +55,9 @@ By default disabled elements like `Button` do not trigger user interactions so a
 ## Customized Tooltips
 
 {{"demo": "pages/demos/tooltips/CustomizedTooltips.js"}}
+
+## Variable Width
+
+The `Tooltip` wraps long text by default to make it readable. Use the `maxWidth` property to customize the width or suppress it.
+
+{{"demo": "pages/demos/tooltips/VariableWidth.js"}}

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

@@ -14,6 +14,7 @@ export interface TooltipProps
   id?: string;
   leaveDelay?: number;
   leaveTouchDelay?: number;
+  minWidth?: number;
   onClose?: (event: React.ChangeEvent<{}>) => void;
   onOpen?: (event: React.ChangeEvent<{}>) => void;
   open?: boolean;

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

@@ -277,6 +277,7 @@ class Tooltip extends React.Component {
       disableHoverListener,
       disableTouchListener,
       id,
+      maxWidth,
       open: openProp,
       placement,
       PopperProps,
@@ -347,6 +348,9 @@ class Tooltip extends React.Component {
                   },
                   classes[`tooltipPlacement${capitalize(placementInner.split('-')[0])}`],
                 )}
+                style={{
+                  maxWidth: maxWidth > 0 ? maxWidth : undefined,
+                }}
               >
                 {title}
               </div>
@@ -404,6 +408,12 @@ Tooltip.propTypes = {
    * The number of milliseconds after the user stops touching an element before hiding the tooltip.
    */
   leaveTouchDelay: PropTypes.number,
+  /**
+   * The maximum width of the tooltip.
+   * This allows long text to be wrapped into multiple lines for better readability.
+   * Specify `0` to suppress the width constraint.
+   */
+  maxWidth: PropTypes.number,
   /**
    * Callback fired when the tooltip requests to be closed.
    *
@@ -469,6 +479,7 @@ Tooltip.defaultProps = {
   enterTouchDelay: 1000,
   leaveDelay: 0,
   leaveTouchDelay: 1500,
+  maxWidth: 300,
   placement: 'bottom',
   TransitionComponent: Grow,
 };

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

@@ -38,7 +38,7 @@ describe('<Tooltip />', () => {
   });
 
   describe('prop: title', () => {
-    it('should display if the title is presetn', () => {
+    it('should display if the title is present', () => {
       const wrapper = shallow(<Tooltip {...defaultProps} open />);
       assert.strictEqual(wrapper.find(Popper).props().open, true);
     });
@@ -56,6 +56,27 @@ describe('<Tooltip />', () => {
     });
   });
 
+  describe('prop: maxWidth', () => {
+    it('should pass the property as style', () => {
+      const customWidth = 400;
+      const wrapper = mount(<Tooltip {...defaultProps} maxWidth={customWidth} />);
+      const children = wrapper.find('span');
+      children.simulate('mouseEnter');
+      const style = wrapper.find(`.${classes.tooltip}`).props().style;
+      assert.strictEqual(style.maxWidth, customWidth);
+      children.simulate('mouseLeave');
+    });
+
+    it('should allow suppression of maxWidth', () => {
+      const wrapper = mount(<Tooltip {...defaultProps} maxWidth={0} />);
+      const children = wrapper.find('span');
+      children.simulate('mouseEnter');
+      const style = wrapper.find(`.${classes.tooltip}`).props().style;
+      assert.strictEqual(typeof style.maxWidth, 'undefined');
+      children.simulate('mouseLeave');
+    });
+  });
+
   it('should respond to external events', () => {
     const wrapper = shallow(<Tooltip {...defaultProps} />);
     wrapper.instance().childrenRef = document.createElement('div');

pages/api/tooltip.md

@@ -25,6 +25,7 @@ title: Tooltip API
 | <span class="prop-name">id</span> | <span class="prop-type">string |   | The relationship between the tooltip and the wrapper component is not clear from the DOM. This property is used with aria-describedby to solve the accessibility issue. If you don't provide this property. It fallback to a random generated id. |
 | <span class="prop-name">leaveDelay</span> | <span class="prop-type">number | <span class="prop-default">0</span> | The number of milliseconds to wait before hiding the tooltip. This property won't impact the leave touch delay (`leaveTouchDelay`). |
 | <span class="prop-name">leaveTouchDelay</span> | <span class="prop-type">number | <span class="prop-default">1500</span> | The number of milliseconds after the user stops touching an element before hiding the tooltip. |
+| <span class="prop-name">maxWidth</span> | <span class="prop-type">number | <span class="prop-default">300</span> | The maximum width of the tooltip. This allows long text to be wrapped into multiple lines for better readability. Specify `0` to suppress the width constraint. |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func |   | Callback fired when the tooltip requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
 | <span class="prop-name">onOpen</span> | <span class="prop-type">func |   | Callback fired when the tooltip requests to be open.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
 | <span class="prop-name">open</span> | <span class="prop-type">bool |   | If `true`, the tooltip is shown. |

pages/demos/tooltips.js

@@ -20,6 +20,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/tooltips/PositionedTooltips'), 'utf8')
+`,
+        },
+        'pages/demos/tooltips/VariableWidth.js': {
+          js: require('docs/src/pages/demos/tooltips/VariableWidth').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/tooltips/VariableWidth'), 'utf8')
 `,
         },
         'pages/demos/tooltips/ControlledTooltips.js': {