From bfd70476096e35e33bba33d851abf44c2c257df3 Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Fri, 5 Jan 2018 22:19:53 +0000
Subject: [PATCH 1/2] [docs] Tidy up Tooltips demos

---
 docs/src/pages/demos/tooltips/ControlledTooltips.js |  8 ++++----
 docs/src/pages/demos/tooltips/SimpleTooltips.js     | 13 +++++--------
 docs/src/pages/demos/tooltips/tooltips.md           |  2 +-
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/docs/src/pages/demos/tooltips/ControlledTooltips.js b/docs/src/pages/demos/tooltips/ControlledTooltips.js
index 5b105028747f1d..35348daa4546ef 100644
--- a/docs/src/pages/demos/tooltips/ControlledTooltips.js
+++ b/docs/src/pages/demos/tooltips/ControlledTooltips.js
@@ -8,11 +8,11 @@ class ControlledTooltips extends React.Component {
     open: false,
   };
 
-  handleIconButtonClose = () => {
+  handleTooltipClose = () => {
     this.setState({ open: false });
   };
 
-  handleIconButtonOpen = () => {
+  handleTooltipOpen = () => {
     this.setState({ open: true });
   };
 
@@ -21,10 +21,10 @@ class ControlledTooltips extends React.Component {
       <Tooltip
         id="tooltip-controlled"
         title="Delete"
-        onClose={this.handleIconButtonClose}
+        onClose={this.handleTooltipClose}
         enterDelay={300}
         leaveDelay={300}
-        onOpen={this.handleIconButtonOpen}
+        onOpen={this.handleTooltipOpen}
         open={this.state.open}
         placement="bottom"
       >
diff --git a/docs/src/pages/demos/tooltips/SimpleTooltips.js b/docs/src/pages/demos/tooltips/SimpleTooltips.js
index 046e88e06d7fa8..818054b709d530 100644
--- a/docs/src/pages/demos/tooltips/SimpleTooltips.js
+++ b/docs/src/pages/demos/tooltips/SimpleTooltips.js
@@ -5,7 +5,6 @@ import AddIcon from 'material-ui-icons/Add';
 import Button from 'material-ui/Button';
 import DeleteIcon from 'material-ui-icons/Delete';
 import IconButton from 'material-ui/IconButton';
-import Typography from 'material-ui/Typography';
 import Tooltip from 'material-ui/Tooltip';
 
 const styles = theme => ({
@@ -13,10 +12,9 @@ const styles = theme => ({
     margin: theme.spacing.unit * 2,
   },
   absolute: {
-    flip: false,
     position: 'absolute',
-    bottom: 32,
-    right: 32,
+    bottom: theme.spacing.unit * 2,
+    right: theme.spacing.unit * 3,
   },
 });
 
@@ -24,20 +22,19 @@ function SimpleTooltips(props) {
   const { classes } = props;
   return (
     <div>
-      <Tooltip id="tooltip-icon" title="Delete" placement="bottom">
+      <Tooltip id="tooltip-icon" title="Delete">
         <IconButton aria-label="Delete">
           <DeleteIcon />
         </IconButton>
       </Tooltip>
-      <Tooltip id="tooltip-fab" className={classes.fab} title="Add" placement="bottom">
+      <Tooltip id="tooltip-fab" className={classes.fab} title="Add">
         <Button fab color="primary" aria-label="Add">
           <AddIcon />
         </Button>
       </Tooltip>
       <br />
       <br />
-      <Typography>The fab on the right is absolutely positioned:</Typography>
-      <Tooltip placement="bottom" title="Position absolute">
+      <Tooltip title="FAB 'position: absolute;'">
         <Button fab color="accent" className={props.classes.absolute}>
           <AddIcon />
         </Button>
diff --git a/docs/src/pages/demos/tooltips/tooltips.md b/docs/src/pages/demos/tooltips/tooltips.md
index a605008f0dd410..9e8c4cefc50293 100644
--- a/docs/src/pages/demos/tooltips/tooltips.md
+++ b/docs/src/pages/demos/tooltips/tooltips.md
@@ -23,6 +23,6 @@ They don’t have directional arrows; instead, they rely on motion emanating fro
 
 ## Showing and hiding
 
-The tooltip is immediately shown when the user's mouse hovers over the element and immediately hides when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through the properties `enterDelay` and `leaveDelay`.
+The tooltip is normally shown immediately when the user's mouse hovers over the element, and hides immediately when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through the properties `enterDelay` and `leaveDelay`, as shown in the Controlled Tooltips example above.
 
 On mobile, the tooltip is displayed when the user longpresses the element and hides after a delay of 1500ms. You can disable this feature with the `disableTriggerTouch` property.

From 342276596c91a958cdd9aec9e382cc26fe4c10c0 Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Fri, 5 Jan 2018 22:40:14 +0000
Subject: [PATCH 2/2] mend

---
 docs/src/pages/demos/tooltips/tooltips.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/demos/tooltips/tooltips.md b/docs/src/pages/demos/tooltips/tooltips.md
index 9e8c4cefc50293..590443b9f4295c 100644
--- a/docs/src/pages/demos/tooltips/tooltips.md
+++ b/docs/src/pages/demos/tooltips/tooltips.md
@@ -23,6 +23,6 @@ They don’t have directional arrows; instead, they rely on motion emanating fro
 
 ## Showing and hiding
 
-The tooltip is normally shown immediately when the user's mouse hovers over the element, and hides immediately when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through the properties `enterDelay` and `leaveDelay`, as shown in the Controlled Tooltips example above.
+The tooltip is normally shown immediately when the user's mouse hovers over the element, and hides immediately when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through the properties `enterDelay` and `leaveDelay`, as shown in the Controlled Tooltips demo above.
 
 On mobile, the tooltip is displayed when the user longpresses the element and hides after a delay of 1500ms. You can disable this feature with the `disableTriggerTouch` property.