Toggling tooltip.

package.json

@@ -121,6 +121,7 @@
     "react-redux": "^5.0.5",
     "react-select": "^1.0.0-rc.2",
     "react-simple-file-input": "^1.0.0",
+    "react-tooltip": "^3.3.0",
     "react-tooltip-component": "^0.3.0",
     "react-transition-group": "^2.2.0",
     "reactify": "^1.1.1",

ui/app/components/new-tooltip.js

@@ -0,0 +1,66 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const findDOMNode = require('react-dom').findDOMNode
+const ReactTooltip = require('react-tooltip')
+
+module.exports = NewTooltip
+
+inherits(NewTooltip, Component)
+function NewTooltip () {
+  Component.call(this)
+  this.state = {
+    tooltipNode: null,
+    tooltipBase: null,
+  }
+
+  // this.pageClick = this.pageClick.bind(this)
+}
+
+// NewTooltip.prototype.pageClick = function (e) {
+//   // event.preventDefault();
+//   const tooltipNode = this.state.tooltipNode
+//   console.log(`e.target`, e.target);
+//   console.log(`tooltipNode.contains(e.target)`, tooltipNode.contains(e.target));
+// },
+
+NewTooltip.prototype.componentDidMount = function () {
+  const tooltipNode = findDOMNode(this);
+  const tooltipBase = findDOMNode(this.refs.tester)
+
+  this.setState({ tooltipBase, tooltipNode })
+}
+
+NewTooltip.prototype.componentDidUpdate = function () {
+  const { show } = this.props
+  const tooltipBase = this.state.tooltipBase
+  const tooltipNode = this.state.tooltipNode
+  
+  if (show) {
+    ReactTooltip.show(tooltipBase)
+  }
+  else {
+    ReactTooltip.hide(tooltipBase)
+  } 
+}
+
+NewTooltip.prototype.render = function () {
+  const props = this.props
+  const { position, title, children } = props
+
+  return h('div', {}, [
+    h('div', {
+      'data-tip': 'test',
+      'data-for': 'something',
+      'ref': 'tester',
+    }),
+    h(ReactTooltip, {
+      place: position || 'top',
+      effect: 'solid',
+      id: 'something',
+      className: 'send-tooltip',
+      type: 'light',
+    }, children),
+  ])
+    
+}

ui/app/css/itcss/components/send.scss

@@ -80,4 +80,15 @@
   color: #3098DC;
   font-size: 12px;
   cursor: pointer;
+}
+
+div.__react_component_tooltip.send-tooltip {
+  left: 177px;
+  top: 50px;
+  width: 237px;
+  height: 307px;
+  background-color: white;
+  opacity: 1;
+  box-shadow: grey 0px 0px 5px;
+  z-index: 1050;
 }

ui/app/send.js

@@ -11,6 +11,7 @@ const isHex = require('./util').isHex
 const EthBalance = require('./components/eth-balance')
 const EnsInput = require('./components/ens-input')
 const ethUtil = require('ethereumjs-util')
+const NewTooltip = require('./components/new-tooltip.js')
 const { getSelectedIdentity } = require('./selectors')
 
 const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'
@@ -56,6 +57,7 @@ function SendTransactionScreen () {
       txData: null,
       memo: '',
     },
+    tooltipShown: false,
   }
 }
 
@@ -216,10 +218,16 @@ SendTransactionScreen.prototype.render = function () {
             placeholder: '0',
           }, []),
 
-          h('div.send-screen-gas-input-customize', {}, [
+          h('div.send-screen-gas-input-customize', {
+            onClick: this.toggleTooltip.bind(this),
+          }, [
             'Customize'
           ]),
 
+          h(NewTooltip, {
+            show: this.state.tooltipShown,
+          }),
+
         ]),
 
         h('div.send-screen-input-wrapper', {}, [
@@ -511,6 +519,10 @@ SendTransactionScreen.prototype.renderSendToken = function () {
   )
 }
 
+SendTransactionScreen.prototype.toggleTooltip = function () {
+  this.setState({ tooltipShown: !this.state.tooltipShown })
+}
+
 SendTransactionScreen.prototype.navigateToAccounts = function (event) {
   event.stopPropagation()
   this.props.dispatch(actions.showAccountsPage())