From 207e0973d9b4846ddf670fc5fb7f82262e2f7690 Mon Sep 17 00:00:00 2001
From: Gerhard Preuss <gelipp@gmail.com>
Date: Tue, 29 Nov 2016 13:49:34 +0100
Subject: [PATCH] revert to stateless tooltip

---
 components/tooltip/index.js            | 22 +++-------
 examples/js/components/tooltipRoute.js | 58 +++++++++++++++++++++++---
 2 files changed, 58 insertions(+), 22 deletions(-)

diff --git a/components/tooltip/index.js b/components/tooltip/index.js
index 6fb4b6f25..3b44b1b39 100644
--- a/components/tooltip/index.js
+++ b/components/tooltip/index.js
@@ -19,27 +19,15 @@ export default class Tooltip extends React.Component {
    * Default properties
    */
   static defaultProps = {
-    content: 'tooltip content'
+    content: 'tooltip content',
+    visible: false
   }
 
   /**
    * Initial state
    */
   state = {
-    left: 'auto',
-    visible: false
-  }
-
-  show = () => {
-    this.setState({
-      visible: true
-    })
-  }
-
-  hide = () => {
-    this.setState({
-      visible: false
-    })
+    left: 'auto'
   }
 
   /**
@@ -74,13 +62,13 @@ export default class Tooltip extends React.Component {
    */
   render () {
     return (
-      <div onMouseOver={this.show} onMouseOut={this.hide}>
+      <div>
         {React.Children.map(this.props.children, child =>
           React.cloneElement(child, {
             ref: 'content'
           })
         )}
-        <Motion style={{val: spring(this.state.visible || this.props.visible ? 1 : 0)}}>
+        <Motion style={{val: spring(this.props.visible ? 1 : 0)}}>
           {style => {
             return (
               <div className='Tooltip' ref={(component) => { this.tooltipRef = component }} style={{
diff --git a/examples/js/components/tooltipRoute.js b/examples/js/components/tooltipRoute.js
index f205776a4..0d036cfba 100644
--- a/examples/js/components/tooltipRoute.js
+++ b/examples/js/components/tooltipRoute.js
@@ -13,10 +13,26 @@ const tooltipDefault =
 const tooltipComponent =
 `class App extends React.Component {
 
+  state = {
+    visible: false
+  }
+
+  show = () => {
+    this.setState({
+      visible: true
+    })
+  }
+
+  hide = () => {
+    this.setState({
+      visible: false
+    })
+  }
+
   render () {
     return (
-      <Tooltip content='Tooltip'>
-        <span>
+      <Tooltip content='Tooltip' visible={this.state.visible}>
+        <span onMouseOver={this.show} onMouseOut={this.hide}>
           Tooltip
         </span>
       </Tooltip>
@@ -30,10 +46,26 @@ ReactDOM.render(<App />, mountNode)`
 const tooltipIcon =
 `class App extends React.Component {
 
+  state = {
+    visible: false
+  }
+
+  show = () => {
+    this.setState({
+      visible: true
+    })
+  }
+
+  hide = () => {
+    this.setState({
+      visible: false
+    })
+  }
+
   render () {
     return (
-      <Tooltip content='Icon'>
-        <div style={{display: 'inline-block'}}>
+      <Tooltip content='Icon' visible={this.state.visible}>
+        <div style={{display: 'inline-block'}} onMouseOver={this.show} onMouseOut={this.hide}>
           <Icon.Person />
         </div>
       </Tooltip>
@@ -47,10 +79,26 @@ ReactDOM.render(<App />, mountNode)`
 const tooltipButton =
 `class App extends React.Component {
 
+  state = {
+    visible: false
+  }
+
+  show = () => {
+    this.setState({
+      visible: true
+    })
+  }
+
+  hide = () => {
+    this.setState({
+      visible: false
+    })
+  }
+
   render () {
     return (
       <Tooltip content='Button' visible={this.state.visible}>
-        <div style={{display: 'inline-block'}}>
+        <div style={{display: 'inline-block'}} onMouseOver={this.show} onMouseOut={this.hide}>
           <Button onClick={() => {}}>
             Button
           </Button>