Tooltips with react-intl (#4549)

* Tooltips support intl strings

* FormattedMessage for strings to Tooltip

* Fix TabBar tooltip display

* r after o (PR comment)

js/src/views/Application/TabBar/Tab/tab.js

@@ -26,13 +26,12 @@ const SIGNER_ID = 'signer';
 
 export default class Tab extends Component {
   static propTypes = {
-    children: PropTypes.node,
     pendings: PropTypes.number,
     view: PropTypes.object.isRequired
   };
 
   render () {
-    const { view, children } = this.props;
+    const { view } = this.props;
 
     return (
       <MUITab
@@ -42,9 +41,7 @@ export default class Tab extends Component {
             ? this.renderSignerLabel()
             : this.renderLabel(view.id)
         }
-      >
-        { children }
-      </MUITab>
+      />
     );
   }
 

js/src/views/Application/TabBar/Tab/tabs.spec.js

@@ -26,7 +26,6 @@ let instance;
 function render (id = 'signer') {
   component = shallow(
     <Tab
-      children={ <div>testChildren</div> }
       pending={ 5 }
       view={ { id } }
     />

js/src/views/Application/TabBar/tabBar.css

@@ -60,8 +60,8 @@
 }
 
 .tabbarTooltip {
-  left: 3.3em;
-  top: 0.5em;
+  left: 3em;
+  top: 4em;
 }
 
 .label {

js/src/views/Application/TabBar/tabBar.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
@@ -49,6 +50,15 @@ class TabBar extends Component {
         </ToolbarGroup>
         <div className={ styles.tabs }>
           { this.renderTabItems() }
+          <Tooltip
+            className={ styles.tabbarTooltip }
+            text={
+              <FormattedMessage
+                id='tabBar.tooltip.overview'
+                defaultMessage='navigate between the different parts and views of the application, switching between an account view, token view and distributed application view'
+              />
+            }
+          />
         </div>
         <ToolbarGroup className={ styles.last }>
           <div />
@@ -61,15 +71,6 @@ class TabBar extends Component {
     const { views, pending } = this.props;
 
     return views.map((view, index) => {
-      const body = (view.id === 'accounts')
-        ? (
-          <Tooltip
-            className={ styles.tabbarTooltip }
-            text='navigate between the different parts and views of the application, switching between an account view, token view and distributed application view'
-          />
-        )
-        : null;
-
       return (
         <Link
           activeClassName={ styles.tabactive }
@@ -80,9 +81,7 @@ class TabBar extends Component {
           <Tab
             pendings={ pending.length }
             view={ view }
-          >
-            { body }
-          </Tab>
+          />
         </Link>
       );
     });