keep the tooltip up while user hover over it

src/store.js

@@ -5,7 +5,7 @@ import persistState from 'redux-localstorage';
 import persistSlicer from 'redux-localstorage-slicer';
 import thunk from 'redux-thunk';
 import { combineReducers, applyMiddleware, createStore, compose } from 'redux';
-import { reducer as tooltip } from 'redux-tooltip';
+import { reducer as tooltip, middleware as tooltipMW } from 'redux-tooltip';
 import api from './steemAPI';
 
 import MessagesWorker, { messagesReducer } from './messages';
@@ -58,7 +58,8 @@ const middleware = [
   thunk.withExtraArgument({
     messagesWorker,
     steemAPI: api,
-  })
+  }),
+  tooltipMW
 ];
 
 const enhancer = compose(

src/user/profileTooltip/ProfileTooltipOrigin.js

@@ -16,6 +16,7 @@ export default class ProfileTooltipOrigin extends Component {
       <Origin
         name="userProfile"
         content={<ProfileTooltip username={this.props.username} store={this.context.store} />}
+        delay
       >
         { this.props.children }
       </Origin>

src/wrapper.js

@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { IntlProvider } from 'react-intl';
-import { Tooltip } from 'redux-tooltip';
+import { Tooltip, actions as tooltipActions } from 'redux-tooltip';
 
 import { login } from './auth/authActions';
 import { getConfig } from './actions';
@@ -27,6 +27,8 @@ import * as reblogActions from './app/Reblog/reblogActions';
     notify,
     getStoredBookmarks,
     getRebloggedList: reblogActions.getRebloggedList,
+    keepTooltip: tooltipActions.keep,
+    hideTooltip: tooltipActions.hide,
   }, dispatch)
 )
 
@@ -63,7 +65,13 @@ export default class Wrapper extends Component {
               </div>
               : <Splash />
           }
-          <Tooltip name="userProfile" store={this.props.store} place="right"/>
+          <Tooltip
+            name="userProfile"
+            store={this.props.store}
+            place="right"
+            onHover={() => this.props.keepTooltip({ name: 'userProfile' })}
+            onLeave={() => this.props.hideTooltip({ name: 'userProfile' })}
+          />
         </div>
       </IntlProvider>
     );