Add Tooltip to ToolbarIcon in Layout Plugin

Summary: Trying to add tooltip to some components to promote tooltip itself and make it clearer what they do

Reviewed By: mweststrate

Differential Revision: D21649207

fbshipit-source-id: 4763ae9a99d687e6624c07bb636c5f4e869cafc9

desktop/app/src/ui/components/ToolbarIcon.tsx

@@ -8,6 +8,7 @@
  */
 
 import Glyph from './Glyph';
+import Tooltip from './Tooltip';
 import {colors} from './colors';
 import styled from '@emotion/styled';
 import React from 'react';
@@ -26,18 +27,20 @@ const ToolbarIconContainer = styled.div({
   position: 'relative', // for settings popover positioning
 });
 
-export default function ToolbarIcon({active, icon, ...props}: Props) {
+export default function ToolbarIcon({active, icon, title, ...props}: Props) {
   return (
-    <ToolbarIconContainer {...props}>
-      <Glyph
-        name={icon}
-        size={16}
-        color={
-          active
-            ? colors.macOSTitleBarIconSelected
-            : colors.macOSTitleBarIconActive
-        }
-      />
-    </ToolbarIconContainer>
+    <Tooltip title={title}>
+      <ToolbarIconContainer {...props}>
+        <Glyph
+          name={icon}
+          size={16}
+          color={
+            active
+              ? colors.macOSTitleBarIconSelected
+              : colors.macOSTitleBarIconActive
+          }
+        />
+      </ToolbarIconContainer>
+    </Tooltip>
   );
 }