[Tooltip] Add default css max-width and customization demo

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,45 @@
+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,
+  },
+  customWidth: {
+    maxWidth: 500,
+  },
+  noMaxWidth: {
+    maxWidth: 'none',
+  },
+});
+
+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 [300px]</Button>
+      </Tooltip>
+      <Tooltip title={longText} classes={{ tooltip: classes.customWidth }}>
+        <Button className={classes.button}>Custom Width [500px]</Button>
+      </Tooltip>
+      <Tooltip title={longText} classes={{ tooltip: classes.noMaxWidth }}>
+        <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.
+
+{{"demo": "pages/demos/tooltips/VariableWidth.js"}}

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

@@ -24,6 +24,7 @@ export const styles = theme => ({
     padding: '4px 8px',
     fontSize: theme.typography.pxToRem(10),
     lineHeight: `${theme.typography.round(14 / 10)}em`,
+    maxWidth: 300,
   },
   /* Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */
   touch: {

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': {