add custom tooltip for workspaces

libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@@ -1,8 +1,8 @@
 
 import { fileDecoration, FileDecorationIcons } from '@remix-ui/file-decorators'
+import { CustomTooltip } from '@remix-ui/helper'
 import { Plugin } from '@remixproject/engine'
 import React, { useState, useRef, useEffect, useReducer } from 'react' // eslint-disable-line
-import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
 import './remix-ui-tabs.css'
 const _paq = window._paq = window._paq || []
@@ -160,16 +160,16 @@ export const TabsUI = (props: TabsUIProps) => {
               }
             }}
           >
-            <OverlayTrigger placement="bottom" overlay={
-              <Tooltip id="overlay-tooltip-run-script">
-                <span>
+            <CustomTooltip
+              placement="bottom"
+              tooltipId="overlay-tooltip-run-script"
+              tooltipText={<span>
                   {(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts') ? "Run script (CTRL + SHIFT + S)" :
                     tabsState.currentExt === 'sol' || tabsState.currentExt === 'yul'? "Compile CTRL + S" : "Select .sol or .yul file to compile or a .ts or .js file and run it"}
-                </span>
-              </Tooltip>
-            }>
+                </span>}
+            >
               <i className="fad fa-play"></i>
-            </OverlayTrigger>
+            </CustomTooltip>
           </button>
           <span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" title="Zoom out" onClick={() => props.onZoomOut()}></span>
           <span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" title="Zoom in" onClick={() => props.onZoomIn()}></span>

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useContext, SyntheticEvent, ChangeEvent, KeyboardEvent } from 'react' // eslint-disable-line
-import { Dropdown, OverlayTrigger, Tooltip } from 'react-bootstrap'
-import { CustomIconsToggle, CustomMenu, CustomToggle } from '@remix-ui/helper'
+import { Dropdown } from 'react-bootstrap'
+import { CustomIconsToggle, CustomMenu, CustomToggle, CustomTooltip } from '@remix-ui/helper'
 import { FileExplorer } from './components/file-explorer' // eslint-disable-line
 import { FileSystemContext } from './contexts'
 import './css/remix-ui-workspace.css'
@@ -336,13 +336,11 @@ export function Workspace () {
   }
 
   const workspaceMenuIcons = [
-    <OverlayTrigger
+    <CustomTooltip
       placement="right"
-      overlay={
-        <Tooltip id="createWorkspaceTooltip" className="text-nowrap">
-          <span>Create</span>
-        </Tooltip>
-      }
+      tooltipId="createWorkspaceTooltip"
+      tooltipClasses="text-nowrap"
+      tooltipText="Create"
     >
       <div
         data-id='workspaceCreate'
@@ -366,14 +364,12 @@ export function Workspace () {
         </span>
         <span className="pl-3">Create</span>
       </div>
-    </OverlayTrigger>,
-    <OverlayTrigger
+    </CustomTooltip>,
+    <CustomTooltip
       placement="right-start"
-      overlay={
-        <Tooltip id="createWorkspaceTooltip" className="text-nowrap">
-          <span>Delete Workspace</span>
-        </Tooltip>
-      }
+      tooltipId="createWorkspaceTooltip"
+      tooltipClasses="text-nowrap"
+      tooltipText="Delete Workspace"
     >
       <div
         data-id='workspaceDelete'
@@ -397,14 +393,12 @@ export function Workspace () {
         </span>
         <span className="pl-3">{'Delete'}</span>
       </div>
-    </OverlayTrigger>,
-    <OverlayTrigger
+    </CustomTooltip>,
+    <CustomTooltip
       placement='right-start'
-      overlay={
-        <Tooltip id="workspaceRenametooltip">
-          <span>Rename Workspace</span>
-        </Tooltip>
-      }
+      tooltipClasses="text-nowrap"
+      tooltipId="workspaceRenametooltip"
+      tooltipText="Rename Workspace"
     >
       <div onClick={() => {
             renameCurrentWorkspace()
@@ -426,15 +420,13 @@ export function Workspace () {
         </span>
         <span className="pl-3">{'Rename'}</span>
       </div>
-    </OverlayTrigger>,
+    </CustomTooltip>,
     <Dropdown.Divider className="border mb-0 mt-0" />,
-    <OverlayTrigger
+    <CustomTooltip
       placement="right-start"
-      overlay={
-        <Tooltip id="cloneWorkspaceTooltip" className="text-nowrap">
-          <span>Clone Git Repository</span>
-        </Tooltip>
-      }
+      tooltipId="cloneWorkspaceTooltip"
+      tooltipClasses="text-nowrap"
+      tooltipText="Clone Git Repository"
     >
       <div
         data-id='cloneGitRepository'
@@ -458,15 +450,13 @@ export function Workspace () {
         </span>
         <span className="pl-3">{'Clone'}</span>
       </div>
-    </OverlayTrigger>,
+    </CustomTooltip>,
     <Dropdown.Divider className="border mt-0 mb-0 remixui_menuhr" style={{ pointerEvents: 'none' }}/>,
-    <OverlayTrigger
+    <CustomTooltip
       placement="right-start"
-      overlay={
-        <Tooltip id="createWorkspaceTooltip" className="text-nowrap">
-          <span>Download Workspace</span>
-        </Tooltip>
-      }
+      tooltipId="createWorkspaceTooltip"
+      tooltipClasses="text-nowrap"
+      tooltipText="Download Workspace"
     >
       <div
         data-id='workspacesDownload'
@@ -490,14 +480,12 @@ export function Workspace () {
         </span>
         <span className="pl-3">{'Download'}</span>
       </div>
-    </OverlayTrigger>,
-    <OverlayTrigger
+    </CustomTooltip>,
+    <CustomTooltip
       placement="right-start"
-      overlay={
-        <Tooltip id="createWorkspaceTooltip" className="text-nowrap">
-          <span>Restore Workspace Backup</span>
-        </Tooltip>
-      }
+      tooltipId="createWorkspaceTooltip"
+      tooltipClasses="text-nowrap"
+      tooltipText="Restore Workspace Backup"
     >
       <div
         data-id='workspacesRestore'
@@ -521,7 +509,7 @@ export function Workspace () {
         </span>
         <span className="pl-3">{'Restore'}</span>
       </div>
-    </OverlayTrigger>,
+    </CustomTooltip>,
   ]
 
   return (
@@ -540,11 +528,9 @@ export function Workspace () {
                   {currentWorkspace !== LOCALHOST ? (<span className="remixui_menu remixui_topmenu d-flex justify-content-between align-items-end w-75">
                     <OverlayTrigger
                       placement="top-end"
-                      overlay={
-                        <Tooltip id="createWorkspaceTooltip" className="text-nowrap">
-                          <span>Create</span>
-                        </Tooltip>
-                      }
+                      tooltipId="createWorkspaceTooltip"
+                      tooltipClasses="text-nowrap"
+                      tooltipText="Create"
                     >
                         <span
                           hidden={currentWorkspace === LOCALHOST}
@@ -559,7 +545,7 @@ export function Workspace () {
                           className='far fa-plus remixui_menuicon d-flex align-self-end'
                           >
                         </span>
-                    </OverlayTrigger>
+                    </CustomTooltip>
                     <Dropdown id="workspacesMenuDropdown" data-id="workspacesMenuDropdown" onToggle={() => hideIconsMenu(!showIconsMenu)} show={showIconsMenu}>
                       <Dropdown.Toggle
                         as={CustomIconsToggle}