revert to stateless tooltip

HBM · Nov 29, 2016 · 207e097 · 207e097
1 parent 222e7a8
commit 207e097
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 22 deletions.
diff --git 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
@@ -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>