feat(tooltips): add for video quality label and feedback button

lang/main.json

@@ -446,9 +446,9 @@
     },
     "videoStatus": {
         "callQuality": "Call Quality",
-        "changeVideoTip": "Change your video quality from the left toolbar.",
         "hd": "HD",
         "highDefinition": "High definition",
+        "labelTooltip": "Current video quality",
         "ld": "LD",
         "lowDefinition": "Low definition",
         "p2pEnabled": "Peer to Peer Enabled",

react/features/feedback/components/FeedbackButton.web.js

@@ -1,8 +1,11 @@
 /* @flow */
 
+import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
+import { translate } from '../../base/i18n';
+
 import { openFeedbackDialog } from '../actions';
 
 /**
@@ -17,7 +20,17 @@ class FeedbackButton extends Component {
          *
          * @type {JitsiConference}
          */
-        _conference: React.PropTypes.object
+        _conference: React.PropTypes.object,
+
+        /**
+         * Invoked to obtain translated strings.
+         */
+        t: React.PropTypes.func,
+
+        /**
+         * From which side of the button the tooltip should appear from.
+         */
+        tooltipPosition: React.PropTypes.string
     };
 
     /**
@@ -41,10 +54,15 @@ class FeedbackButton extends Component {
      */
     render() {
         return (
-            <a
-                className = 'button icon-feedback'
-                id = 'feedbackButton'
-                onClick = { this._onClick } />
+            <div id = 'feedbackButton'>
+                <Tooltip
+                    description = { this.props.t('welcomepage.sendFeedback') }
+                    position = { this.props.tooltipPosition } >
+                    <a
+                        className = 'button icon-feedback'
+                        onClick = { this._onClick } />
+                </Tooltip>
+            </div>
         );
     }
 
@@ -82,4 +100,4 @@ function _mapStateToProps(state) {
     };
 }
 
-export default connect(_mapStateToProps)(FeedbackButton);
+export default translate(connect(_mapStateToProps)(FeedbackButton));

react/features/toolbox/components/SecondaryToolbar.web.js

@@ -101,8 +101,9 @@ class SecondaryToolbar extends Component {
             <Toolbar
                 className = { secondaryToolbarClassName }
                 toolbarButtons = { _secondaryToolbarButtons }
-                tooltipPosition = { 'right' }>
-                { _callStatsID ? <FeedbackButton /> : null }
+                tooltipPosition = 'right'>
+                { _callStatsID
+                    ? <FeedbackButton tooltipPosition = 'right' /> : null }
             </Toolbar>
         );
     }

react/features/video-quality/components/VideoQualityLabel.web.js

@@ -1,3 +1,4 @@
+import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -125,7 +126,8 @@ export class VideoQualityLabel extends Component {
             _conferenceStarted,
             _filmstripVisible,
             _remoteVideosVisible,
-            _resolution
+            _resolution,
+            t
         } = this.props;
 
         // FIXME The _conferenceStarted check is used to be defensive against
@@ -151,12 +153,15 @@ export class VideoQualityLabel extends Component {
             <div
                 className = { classNames }
                 id = 'videoResolutionLabel'>
-                <div
-                    className = 'video-quality-label-status'>
-                    { _audioOnly
-                        ? <i className = 'icon-visibility-off' />
-                        : this._mapResolutionToTranslation(_resolution) }
-                </div>
+                <Tooltip
+                    description = { t('videoStatus.labelTooltip') }
+                    position = { 'left' }>
+                    <div className = 'video-quality-label-status'>
+                        { _audioOnly
+                            ? <i className = 'icon-visibility-off' />
+                            : this._mapResolutionToTranslation(_resolution) }
+                    </div>
+                </Tooltip>
             </div>
         );
     }