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,8 +27,9 @@ 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 (
+    <Tooltip title={title}>
       <ToolbarIconContainer {...props}>
         <Glyph
           name={icon}
@@ -39,5 +41,6 @@ export default function ToolbarIcon({active, icon, ...props}: Props) {
           }
         />
       </ToolbarIconContainer>
+    </Tooltip>
   );
 }