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

lang/main.json

     },
     "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

 /* @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';
 
 /**
          *
          * @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
     };
 
     /**
      */
     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>
         );
     }
 
     };
 }
 
-export default connect(_mapStateToProps)(FeedbackButton);
+export default translate(connect(_mapStateToProps)(FeedbackButton));

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

             <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

+import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
             _conferenceStarted,
             _filmstripVisible,
             _remoteVideosVisible,
-            _resolution
+            _resolution,
+            t
         } = this.props;
 
         // FIXME The _conferenceStarted check is used to be defensive against
             <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>
         );
     }