add custom tooltip to solidity-compiler

libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx

@@ -12,7 +12,7 @@ export function CustomTooltip({ children, placement, tooltipId, tooltipClasses,
         placement={placement}
         overlay={
           <Tooltip id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} className={tooltipClasses}>
-            <span className={tooltipTextClasses}>{tooltipText}</span>
+            {typeof tooltipText === 'string' ? (<span className={tooltipTextClasses}>{tooltipText}</span>) : (tooltipText)}
           </Tooltip>
         }
       >

libs/remix-ui/helper/src/types/customtooltip.ts

@@ -6,6 +6,6 @@ export type CustomTooltipType = {
   placement?: Placement,
   tooltipId?: string,
   tooltipClasses?:string,
-  tooltipText: string,
+  tooltipText: string | JSX.Element,
   tooltipTextClasses?: string
 }

libs/remix-ui/search/src/lib/components/Find.tsx

@@ -1,5 +1,5 @@
 import { CustomTooltip } from '@remix-ui/helper'
-import React, { useContext, useEffect, useRef, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { SearchContext } from '../context/context'
 
 export const Find = () => {

libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx

@@ -2,11 +2,10 @@ import React, { useEffect, useState, useRef, useReducer } from 'react' // eslint
 import semver from 'semver'
 import { CompilerContainerProps } from './types'
 import { ConfigurationSettings } from '@remix-project/remix-lib-ts'
-import { checkSpecialChars, extractNameFromKey } from '@remix-ui/helper'
+import { checkSpecialChars, CustomTooltip, extractNameFromKey } from '@remix-ui/helper'
 import { canUseWorker, baseURLBin, baseURLWasm, urlFromVersion, pathToURL, promisedMiniXhr } from '@remix-project/remix-solidity'
 import { compilerReducer, compilerInitialState } from './reducers/compiler'
 import { resetEditorMode, listenToEvents } from './actions/compiler'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
 import { getValidLanguage } from '@remix-project/remix-solidity'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { configFileContent } from './compilerConfiguration'
@@ -725,26 +724,22 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
         <div className='pt-0 remixui_compilerSection'>
           <div className="mb-1">
             <label className="remixui_compilerLabel form-check-label" htmlFor="versionSelector">Compiler</label>
-            <OverlayTrigger
+            <CustomTooltip
               placement="top"
-              overlay={
-                <Tooltip id="promptCompilerTooltip" className="text-nowrap">
-                  <span>{"Add a custom compiler with URL"}</span>
-                </Tooltip>
-              }
+              tooltipId="promptCompilerTooltip"
+              tooltipClasses="text-nowrap"
+              tooltipText={"Add a custom compiler with URL"}
             >
               <span className="far fa-plus border-0 p-0 ml-3" onClick={() => promptCompiler()}></span>
-            </OverlayTrigger>
-            <OverlayTrigger
+            </CustomTooltip>
+            <CustomTooltip
               placement="top"
-              overlay={
-                <Tooltip id="showCompilerTooltip" className="text-nowrap">
-                  <span>{"See compiler license"}</span>
-                </Tooltip>
-              }
+              tooltipId="showCompilerTooltip"
+              tooltipClasses="text-nowrap"
+              tooltipText={"See compiler license"}
             >
               <span className="fa fa-file-text-o border-0 p-0 ml-2" onClick={() => showCompilerLicense()}></span>
-            </OverlayTrigger>
+            </CustomTooltip>
             <select value={state.selectedVersion || state.defaultVersion} onChange={(e) => handleLoadVersion(e.target.value)} className="custom-select" id="versionSelector" disabled={state.allversions.length <= 0}>
               {state.allversions.length <= 0 && <option disabled data-id={state.selectedVersion === state.defaultVersion ? 'selected' : ''}>{state.defaultVersion}</option>}
               {state.allversions.length <= 0 && <option disabled data-id={state.selectedVersion === 'builtin' ? 'selected' : ''}>builtin</option>}
@@ -775,13 +770,14 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               <input className="remixui_autocompile custom-control-input" onChange={updatehhCompilation} id="enableHardhat" type="checkbox" title="Enable Hardhat Compilation" checked={hhCompilation} />
               <label className="form-check-label custom-control-label" htmlFor="enableHardhat">Enable Hardhat Compilation</label>
               <a className="mt-1 text-nowrap" href='https://remix-ide.readthedocs.io/en/latest/hardhat.html#enable-hardhat-compilation' target={'_blank'}>
-                <OverlayTrigger placement={'right'} overlay={
-                  <Tooltip className="text-nowrap" id="overlay-tooltip-hardhat">
-                    <span className="border bg-light text-dark p-1 pr-3" style={{ minWidth: '230px' }}>Learn how to use Hardhat Compilation</span>
-                  </Tooltip>
-                }>
+                <CustomTooltip
+                  placement={'right'}
+                  tooltipClasses="text-nowrap"
+                  tooltipId="overlay-tooltip-hardhat"
+                  tooltipText={<span className="border bg-light text-dark p-1 pr-3" style={{ minWidth: '230px' }}>Learn how to use Hardhat Compilation</span>}
+                >
                   <i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle'} aria-hidden="true"></i>
-                </OverlayTrigger>
+                </CustomTooltip>
               </a>
             </div>
           }
@@ -791,13 +787,14 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               <input className="remixui_autocompile custom-control-input" onChange={updateTruffleCompilation} id="enableTruffle" type="checkbox" title="Enable Truffle Compilation" checked={truffleCompilation} />
               <label className="form-check-label custom-control-label" htmlFor="enableTruffle">Enable Truffle Compilation</label>
               <a className="mt-1 text-nowrap" href='https://remix-ide.readthedocs.io/en/latest/truffle.html#enable-truffle-compilation' target={'_blank'}>
-                <OverlayTrigger placement={'right'} overlay={
-                  <Tooltip className="text-nowrap" id="overlay-tooltip-truffle">
-                    <span className="border bg-light text-dark p-1 pr-3" style={{ minWidth: '230px' }}>Learn how to use Truffle Compilation</span>
-                  </Tooltip>
-                }>
+                <CustomTooltip
+                  placement={'right'}
+                  tooltipClasses="text-nowrap"
+                  tooltipId="overlay-tooltip-truffle"
+                  tooltipText={<span className="border bg-light text-dark p-1 pr-3" style={{ minWidth: '230px' }}>Learn how to use Truffle Compilation</span>}
+                >
                   <i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle'} aria-hidden="true"></i>
-                </OverlayTrigger>
+                </CustomTooltip>
               </a>
             </div>
           }
@@ -820,19 +817,17 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
           <div className={`flex-column 'd-flex'}`}>
             <div className="mb-2 ml-4">
               <label className="remixui_compilerLabel form-check-label" htmlFor="compilierLanguageSelector">Language</label>
-              <OverlayTrigger
+              <CustomTooltip
                 placement="right-start"
-                overlay={
-                  <Tooltip id="compilerLabelTooltip" className="text-nowrap">
-                    <span>{'Language specification available from   Compiler >= v0.5.7'}</span>
-                  </Tooltip>
-                }
+                tooltipId="compilerLabelTooltip"
+                tooltipClasses="text-nowrap"
+                tooltipText={<span>{'Language specification available from   Compiler >= v0.5.7'}</span>}
               >
                 <select onChange={(e) => handleLanguageChange(e.target.value)} disabled={state.useFileConfiguration} value={state.language} className="custom-select" id="compilierLanguageSelector">
                   <option data-id={state.language === 'Solidity' ? 'selected' : ''} value='Solidity'>Solidity</option>
                   <option data-id={state.language === 'Yul' ? 'selected' : ''} value='Yul'>Yul</option>
                 </select>
-              </OverlayTrigger>
+              </CustomTooltip>
             </div>
             <div className="mb-2 ml-4">
               <label className="remixui_compilerLabel form-check-label" htmlFor="evmVersionSelector">EVM Version</label>
@@ -863,21 +858,19 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             <label className="form-check-label custom-control-label" htmlFor="scFileConfig" data-id="scFileConfiguration">Use configuration file</label>
           </div>
           <div className={`pt-2 ml-4 ml-2 align-items-start justify-content-between d-flex`}>
-            {(!showFilePathInput && state.useFileConfiguration) && <OverlayTrigger
+            {(!showFilePathInput && state.useFileConfiguration) && <CustomTooltip
                 placement="bottom"
-                overlay={
-                  <Tooltip id="configfileTooltip" className="text-nowrap">
-                    <span>
+                tooltipId="configfileTooltip"
+                tooltipClasses="text-nowrap"
+                tooltipText={<span>
                       Click to open the config file
-                    </span>
-                  </Tooltip>
-                }
+                    </span>}
               >
                 <span
                   onClick={configFilePath === '' ? () => { } : async () => { await openFile() }}
                   className="py-2 remixui_compilerConfigPath"
                 >{configFilePath === '' ? 'No file selected.' : configFilePath}</span>
-              </OverlayTrigger>}
+              </CustomTooltip>}
             {(!showFilePathInput && !state.useFileConfiguration) && <span className="py-2 text-secondary">{configFilePath}</span>}
             <input
               ref={configFilePathInput}
@@ -897,19 +890,19 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
         </div>
         <div className="px-4">
           <button id="compileBtn" data-id="compilerContainerCompileBtn" className="btn btn-primary btn-block d-block w-100 text-break remixui_disabled mb-1 mt-3" onClick={compile} disabled={(configFilePath === '' && state.useFileConfiguration) || disableCompileButton}>
-            <OverlayTrigger overlay={
-              <Tooltip id="overlay-tooltip-compile">
-                <div className="text-left">
+            <CustomTooltip
+              placement="auto"
+              tooltipId="overlay-tooltip-compile"
+              tooltipText={<div className="text-left">
                   {!(configFilePath === '' && state.useFileConfiguration) && <div><b>Ctrl+S</b> for compiling</div>}
                   {(configFilePath === '' && state.useFileConfiguration) && <div> No config file selected</div>}
-                </div>
-              </Tooltip>
-            }>
+                </div>}
+            >
               <span>
                 {<i ref={compileIcon} className="fas fa-sync remixui_iconbtn" aria-hidden="true"></i>}
                 Compile {typeof state.compiledFileName === 'string' ? extractNameFromKey(state.compiledFileName) || '<no file selected>' : '<no file selected>'}
               </span>
-            </OverlayTrigger>
+            </CustomTooltip>
           </button>
           <div className='d-flex align-items-center'>
             <button
@@ -919,22 +912,23 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               onClick={compileAndRun}
               disabled={(configFilePath === '' && state.useFileConfiguration) || disableCompileButton}
             >
-              <OverlayTrigger overlay={
-                <Tooltip id="overlay-tooltip-compile-run">
-                  <div className="text-left">
+              <CustomTooltip
+                placement="auto"
+                tooltipId="overlay-tooltip-compile-run"
+                tooltipText={<div className="text-left">
                     {!(configFilePath === '' && state.useFileConfiguration) && <div><b>Ctrl+Shift+S</b> for compiling and script execution</div>}
                     {(configFilePath === '' && state.useFileConfiguration) && <div> No config file selected</div>}
-                  </div>
-                </Tooltip>
-              }>
+                  </div>}
+              >
                 <span>
                   Compile and Run script
                 </span>
-              </OverlayTrigger>
+              </CustomTooltip>
             </button>
-            <OverlayTrigger overlay={
-              <Tooltip id="overlay-tooltip-compile-run-doc">
-                <div className="text-left p-2">
+            <CustomTooltip
+              placement="auto"
+              tooltipId="overlay-tooltip-compile-run-doc"
+              tooltipText={<div className="text-left p-2">
                   <div>Choose the script to execute right after compilation by adding the `dev-run-script` natspec tag, as in:</div>
                   <pre>
                     <code>
@@ -947,11 +941,10 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
                     </code>
                   </pre>
                   Click to know more
-                </div>
-              </Tooltip>
-            }>
+                </div>}
+            >
               <a href="https://remix-ide.readthedocs.io/en/latest/running_js_scripts.html#compile-a-contract-and-run-a-script-on-the-fly" target="_blank" ><i className="pl-2 ml-2 mt-3 mb-1 fas fa-info text-dark"></i></a>
-            </OverlayTrigger>
+            </CustomTooltip>
             <CopyToClipboard tip="Click to copy the custom NatSpec tag" getContent={() => '@custom:dev-run-script file_path'} direction='top'>
               <button className="btn remixui_copyButton  ml-2 mt-3 mb-1 text-dark">
                 <i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>

libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx

@@ -5,7 +5,7 @@ import { TreeView, TreeViewItem } from '@remix-ui/tree-view' // eslint-disable-l
 import { CopyToClipboard } from '@remix-ui/clipboard' // eslint-disable-line
 
 import './css/style.css'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { CustomTooltip } from '@remix-ui/helper'
 
 export const ContractSelection = (props: ContractSelectionProps) => {
   const { api, compiledFileName, contractsDetails, contractList, modal } = props
@@ -197,55 +197,40 @@ export const ContractSelection = (props: ContractSelectionProps) => {
           </div>
           <article className="mt-2 pb-0">
             <button id="publishOnIpfs" className="btn btn-secondary btn-block" onClick={() => { handlePublishToStorage('ipfs') }}>
-              <OverlayTrigger
+              <CustomTooltip
                 placement="right-start"
-                overlay={
-                  <Tooltip
-                    id="publishOnIpfsTooltip"
-                    className="text-nowrap"
-                  >
-                    <span>Publish on Ipfs</span>
-                  </Tooltip>
-                }
+                tooltipId="publishOnIpfsTooltip"
+                tooltipClasses="text-nowrap"
+                tooltipText="Publish on Ipfs"
               >
                 <span>
                   <span>Publish on Ipfs</span>
                   <img id="ipfsLogo" className="remixui_storageLogo ml-2" src="assets/img/ipfs.webp" />
                 </span>
-              </OverlayTrigger>
+              </CustomTooltip>
             </button>
             <button id="publishOnSwarm" className="btn btn-secondary btn-block" onClick={() => { handlePublishToStorage('swarm') }}>
-              <OverlayTrigger
+              <CustomTooltip
                 placement="right-start"
-                overlay={
-                  <Tooltip
-                    id="publishOnSwarmTooltip"
-                    className="text-nowrap"
-                  >
-                    <span>Publish on Swarm</span>
-                  </Tooltip>
-                }
+                tooltipId="publishOnSwarmTooltip"
+                tooltipClasses="text-nowrap"
+                tooltipText="Publish on Swarm"
               >
                 <span>
                   <span>Publish on Swarm</span>
                   <img id="swarmLogo" className="remixui_storageLogo ml-2" src="assets/img/swarm.webp" />
                 </span>
-              </OverlayTrigger>
+              </CustomTooltip>
             </button>
             <button data-id="compilation-details" className="btn btn-secondary btn-block" onClick={() => { details() }}>
-              <OverlayTrigger
+              <CustomTooltip
                 placement="right-start"
-                overlay={
-                  <Tooltip
-                    id="CompilationDetailsTooltip"
-                    className="text-nowrap"
-                  >
-                    <span>Display Contract Details</span>
-                  </Tooltip>
-                }
+                tooltipId="CompilationDetailsTooltip"
+                tooltipClasses="text-nowrap"
+                tooltipText="Display Contract Details"
               >
                 <span>Compilation Details</span>
-              </OverlayTrigger>
+              </CustomTooltip>
             </button>
             {/* Copy to Clipboard */}
             <div className="remixui_contractHelperButtons">