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-end'
       },
       {
         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: 'bottom-start'
       },
       {
         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: {}
@@ -48,14 +55,13 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
     <>
       <span className='remixui_label' title={props.title} data-path={props.title} style={{ fontWeight: 'bold' }}>{ props.title }</span>
       <span className="pl-2">{
-        state.menuItems.map(({ action, title, icon }, index) => {
+        state.menuItems.map(({ action, title, icon, placement }, index) => {
           if (action === 'uploadFile') {
             return (
               <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) => {
@@ -68,6 +74,15 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
             )
           } else {
             return (
+              <OverlayTrigger
+                placement={placement as Placement}
+                overlay={
+                  <Tooltip id={`${action}-${title}-${icon}-${index}`} className="text-nowrap">
+                    <span>{title}</span>
+                  </Tooltip>
+                }
+                key={`${action}-${title}-${index}`}
+              >
                 <span
                   id={action}
                   data-id={'fileExplorerNewFile' + action}
@@ -85,10 +100,10 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                     }
                   }}
                   className={'newFile ' + icon + ' remixui_newFile'}
-                title={title}
                   key={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[],