feature(tooltip): add tooltip styling

app/app.global.scss

@@ -1,6 +1,7 @@
 @import "~font-awesome/css/font-awesome.css";
 @import 'reset.scss';
 @import 'variables.scss';
+@import 'tooltip.scss';
 
 @font-face {
   font-family: 'Roboto';

app/main.dev.js

@@ -10,8 +10,8 @@
  *
  * @flow
  */
-import { app, BrowserWindow } from 'electron';
-import MenuBuilder from './menu';
+import { app, BrowserWindow } from 'electron'
+import MenuBuilder from './menu'
 
 let mainWindow = null;
 

app/routes/app/components/components/Nav.js

@@ -9,7 +9,6 @@ import styles from './Nav.scss'
 
 class Nav extends Component {
   render() {
-    console.log('props: ', this.props)
     const { ticker, balance } = this.props
     return (
       <nav className={styles.nav}>
@@ -23,11 +22,11 @@ class Nav extends Component {
             </span>
           </li>
           <li className={`${styles.balance} ${styles.link}`}>
-            <p>
+            <p data-hint='Wallet balance' className='hint--bottom-left'>
               <span>{ticker.current === 'btc' ? <FaBitcoin /> : <FaDollar />}</span>
               <span>{satoshisToBtc(balance.walletBalance)}</span>
             </p>
-            <p>
+            <p data-hint='Channel balance' className='hint--bottom-left'>
               <span>{ticker.current === 'btc' ? <FaBitcoin /> : <FaDollar />}</span>
               <span>{satoshisToBtc(balance.channelBalance)}</span>
             </p>

app/tooltip.scss

@@ -0,0 +1,133 @@
+/* Tooltips */
+[data-hint] {
+  position: relative;
+  /*display: inline-block;*/
+}
+[data-hint]:before,
+[data-hint]:after {
+  position: absolute;
+  will-change: transform;
+  visibility: hidden;
+  opacity: 0;
+  z-index: 900005;
+  pointer-events: none;
+  transition: 0.2s ease;
+  transition-delay: 0ms;
+}
+[data-hint]:hover:before,
+[data-hint]:hover:after {
+  visibility: visible;
+  opacity: 1;
+}
+[data-hint]:before {
+  content: '';
+  position: absolute;
+  background: transparent;
+  border: 6px solid transparent;
+  z-index: 900006;
+}
+[data-hint]:after {
+  content: attr(data-hint);
+  background: #404040;
+  color: #e0e0e0;
+  text-shadow: 0 -1px 0 black;
+  padding: 8px 10px;
+  line-height: 12px;
+  white-space: nowrap;
+  border-radius: 2px;
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
+  letter-spacing: normal;
+  font-size: 12px;
+  font-weight: normal;
+  font-style: inherit;
+  font-family: 'Noto Sans','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif;
+}
+.hint--bottom:before,
+.hint--bottom-left:before {
+  border-bottom-color: #404040;
+}
+.hint--top:before,
+.hint--top-left:before {
+  border-top-color: #404040;
+}
+.hint--bottom:before {
+  margin-top: -12px;
+}
+.hint--bottom:after {
+  margin-left: -18px;
+}
+.hint--bottom:before,
+.hint--bottom:after {
+  top: 100%;
+  left: 50%;
+}
+.hint--bottom:hover:after,
+.hint--bottom:hover:before {
+  -webkit-transform: translateY(8px);
+  transform: translateY(8px);
+}
+.hint--top:before {
+  margin-bottom: -12px;
+}
+.hint--top:after {
+  margin-left: -18px;
+}
+.hint--top:before,
+.hint--top:after {
+  bottom: 100%;
+  left: 50%;
+}
+.hint--top:hover:after,
+.hint--top:hover:before {
+  -webkit-transform: translateY(-8px);
+  transform: translateY(-8px);
+}
+.hint--top-left:before {
+  margin-bottom: -12px;
+}
+.hint--top-left:after {
+  margin-right: -6px;
+}
+.hint--top-left:before,
+.hint--top-left:after {
+  bottom: 100%;
+  right: 30%;
+}
+.hint--top-left:hover:after,
+.hint--top-left:hover:before {
+  -webkit-transform: translateY(-8px);
+  transform: translateY(-8px);
+}
+.hint--bottom-left:before {
+  margin-top: -12px;
+}
+.hint--bottom-left:after {
+  margin-right: -6px;
+}
+.hint--bottom-left:before,
+.hint--bottom-left:after {
+  top: 100%;
+  right: 30%;
+}
+.hint--bottom-left:hover:after,
+.hint--bottom-left:hover:before {
+  -webkit-transform: translateY(8px);
+  transform: translateY(8px);
+}
+.hint--left:before {
+  margin-right: -12px;
+  margin-top: -6px;
+}
+.hint--left:after {
+  margin-right: -14px;
+}
+.hint--left:before,
+.hint--left:after {
+  right: 100%;
+  bottom: 50%;
+}
+.hint--left:hover:after,
+.hint--left:hover:before {
+  -webkit-transform: translateX(-8px);
+  transform: translateX(-8px);
+}

package.json

@@ -183,7 +183,6 @@
   },
   "dependencies": {
     "axios": "^0.16.2",
-    "big.js": "^3.1.3",
     "devtron": "^1.4.0",
     "electron-debug": "^1.2.0",
     "font-awesome": "^4.7.0",