Merge pull request #3008 from ethereum/custom-tooltips-fe

add custom tooltips for file explorer icons

libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx

@@ -1,4 +1,6 @@
 import React, { useState, useEffect } from 'react' //eslint-disable-line
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { Placement } from 'react-bootstrap/esm/Overlay'
 import { FileExplorerMenuProps } from '../types'
 const _paq = window._paq = window._paq || []
 
@@ -8,27 +10,32 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
       {
         action: 'createNewFile',
         title: 'Create New File',
-        icon: 'far fa-file'
+        icon: 'far fa-file',
+        placement: 'top-start'
       },
       {
         action: 'createNewFolder',
         title: 'Create New Folder',
-        icon: 'far fa-folder'
+        icon: 'far fa-folder',
+        placement: 'top-end'
       },
       {
         action: 'publishToGist',
         title: 'Publish all the current workspace files (only root) to a github gist',
-        icon: 'fab fa-github'
+        icon: 'fab fa-github',
+        placement: 'top-start'
       },
       {
         action: 'uploadFile',
         title: 'Load a local file into current workspace',
-        icon: 'fa fa-upload'
+        icon: 'fa fa-upload',
+        placement: 'right'
       },
       {
         action: 'updateGist',
         title: 'Update the current [gist] explorer',
-        icon: 'fab fa-github'
+        icon: 'fab fa-github',
+        placement: 'right-start'
       }
     ].filter(item => props.menuItems && props.menuItems.find((name) => { return name === item.action })),
     actions: {}
@@ -46,16 +53,32 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
 
   return (
     <>
-      <span className='remixui_label' title={props.title} data-path={props.title} style={{ fontWeight: 'bold' }}>{ props.title }</span>
+      <OverlayTrigger
+        placement="top-start"
+        overlay={
+          <Tooltip id="remixuilabelTooltip" className="text-nowrap">
+            <span>{props.title}</span>
+          </Tooltip>
+        }
+      >
+        <span className='remixui_label' data-path={props.title} style={{ fontWeight: 'bold' }}>{ props.title }</span>
+      </OverlayTrigger>
       <span className="pl-2">{
-        state.menuItems.map(({ action, title, icon }, index) => {
+        state.menuItems.map(({ action, title, icon, placement }, index) => {
           if (action === 'uploadFile') {
             return (
+              <OverlayTrigger
+                placement="right"
+                overlay={
+                  <Tooltip id="uploadFileTooltip" className="text-nowrap">
+                    <span>{title}</span>
+                  </Tooltip>
+                }
+              >
                 <label
                   id={action}
                   data-id={'fileExplorerUploadFile' + action }
                   className={icon + ' mb-0 remixui_newFile'}
-                title={title}
                   key={index}
                 >
                     <input id="fileUpload" data-id="fileExplorerFileUpload" type="file" onChange={(e) => {
@@ -65,9 +88,18 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                     }}
                     multiple />
                 </label>
+              </OverlayTrigger>
             )
           } else {
             return (
+              <OverlayTrigger
+                placement={placement as Placement}
+                overlay={
+                  <Tooltip id={`${action}-${title}-${icon}-${index}`} className="text-nowrap">
+                    <span>{title}</span>
+                  </Tooltip>
+                }
+              >
                 <span
                   id={action}
                   data-id={'fileExplorerNewFile' + action}
@@ -85,10 +117,10 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                     }
                   }}
                   className={'newFile ' + icon + ' remixui_newFile'}
-                title={title}
-                key={index}
+                  key={`${action}-${title}-${index}`}
                 >
                 </span>
+              </OverlayTrigger>
             )
           }
         })}

libs/remix-ui/workspace/src/lib/types/index.ts

@@ -103,7 +103,7 @@ export interface FileExplorerProps {
     dispatchMoveFile: (src: string, dest: string) => Promise<void>,
     dispatchMoveFolder: (src: string, dest: string) => Promise<void>
 }
-
+type Placement = import('react-overlays/usePopper').Placement
 export interface FileExplorerMenuProps {
     title: string,
     menuItems: string[],
@@ -111,6 +111,7 @@ export interface FileExplorerMenuProps {
     createNewFolder: (parentFolder?: string) => void,
     publishToGist: (path?: string) => void,
     uploadFile: (target: EventTarget & HTMLInputElement) => void
+    tooltipPlacement?: Placement
 }
 export interface FileExplorerContextMenuProps {
     actions: action[],