adding in off-click of element handler

frontend/src/components/header/index.js

@@ -76,14 +76,22 @@ const arrowPosition = {
   right: '10%'
 };
 
-const Header = ({
-  account = {},
-  tooltip = false,
-  handleToggle
-}) => {
+const Header = (props) => {
+
+  const {
+    account,
+    handleToggle,
+    tooltip
+  } = props;
+
   const handleToggleClick = (ev) => {
     ev.preventDefault();
-    handleToggle();
+    handleToggle(!tooltip);
+  };
+
+  const handleHideToggle = (ev) => {
+    ev.preventDefault();
+    handleToggle(false);
   };
 
   const tooltipComponent = !tooltip ? null : (
@@ -103,7 +111,11 @@ const Header = ({
   );
 
   return (
-    <StyledHeader name='application-header'>
+    <StyledHeader
+      name='application-header'
+      onBlur={handleHideToggle}
+      onFocus={handleHideToggle}
+    >
       <Row>
         <Column lg={10} xs={8}>
           <Link to='/'>

frontend/src/containers/header/index.js

@@ -10,7 +10,7 @@ const mapStateToProps = (state, ownProps) => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  handleToggle: () => dispatch(toggleHeaderTooltip())
+  handleToggle: (bool) => dispatch(toggleHeaderTooltip(bool))
 });
 
 export default connect(

frontend/src/state/reducers/account.js

@@ -2,13 +2,11 @@ import { handleActions } from 'redux-actions';
 import { toggleHeaderTooltip } from '@state/actions';
 
 export default handleActions({
-  [toggleHeaderTooltip.toString()]: (state, action) => {
-    return {
-      ...state,
-      ui: {
-        ...state.ui,
-        tooltip: !state.ui.tooltip
-      }
-    };
-  }
+  [toggleHeaderTooltip.toString()]: (state, action) => ({
+    ...state,
+    ui: {
+      ...state.ui,
+      tooltip: action.payload
+    }
+  })
 }, {});