feat(Toolbar): Redesign web toolbar

react/features/base/toolbox/components/ToolboxButtonWithIcon.js

@@ -3,6 +3,7 @@
 import React, { Component } from 'react';
 
 import { Icon } from '../../icons';
+import { Tooltip } from '../../tooltip';
 
 type Props = {
 
@@ -26,6 +27,11 @@ type Props = {
      */
     onIconClick: Function,
 
+    /**
+     * The tooltip used for the icon.
+     */
+    iconTooltip: string,
+
     /**
      * Additional styles.
      */
@@ -99,6 +105,7 @@ export default class ToolboxButtonWithIcon extends Component<Props, State> {
             children,
             icon,
             iconDisabled,
+            iconTooltip,
             onIconClick,
             styles
         } = this.props;
@@ -124,13 +131,18 @@ export default class ToolboxButtonWithIcon extends Component<Props, State> {
                 className = 'settings-button-container'
                 styles = { styles }>
                 {children}
+
                 <div
                     onMouseEnter = { this._onMouseEnter }
                     onMouseLeave = { this._onMouseLeave }>
-                    <Icon
-                        { ...iconProps }
-                        size = { size }
-                        src = { icon } />
+                    <Tooltip
+                        content = { iconTooltip }
+                        position = 'top'>
+                        <Icon
+                            { ...iconProps }
+                            size = { size }
+                            src = { icon } />
+                    </Tooltip>
                 </div>
             </div>
         );