Merge pull request #3137 from ethereum/icons-panel-tooltips

Tooltip Review Story Fixes

apps/remix-ide-e2e/src/local-plugin/src/app/app.tsx

@@ -110,6 +110,7 @@ function App () {
         placeholder="Enter payload here..."
         value={payload}
         onChange={handleChange}
+        data-id="payload-input"
       />
       {profiles.map((profile: Profile) => {
         const methods = profile.methods.map((method: string) => {

apps/remix-ide-e2e/src/tests/libraryDeployment.test.ts

@@ -21,6 +21,7 @@ module.exports = {
     let addressRef: string
     browser.verifyContracts(['test'])
       .clickLaunchIcon('udapp')
+      .click('#selectExEnv')
       .selectContract('test')
       .createContract('')
       .getAddressAtPosition(0, (address) => {

apps/remix-ide-e2e/src/tests/plugin_api.ts

@@ -50,7 +50,7 @@ const debugValues = async function (browser: NightwatchBrowser, field: string, e
 const setPayload = async (browser: NightwatchBrowser, payload: any) => {
   return new Promise((resolve) => {
     if (typeof payload !== 'string') payload = JSON.stringify(payload)
-    browser.clearValue('//*[@id="payload"]').setValue('//*[@id="payload"]', payload, (result) => {
+    browser.clearValue('//*[@id="payload"]').pause(500).setValue('//*[@id="payload"]', payload, (result) => {
       resolve(result)
     })
   })
@@ -419,7 +419,7 @@ module.exports = {
       .addFile('test_modal.js', { content: testModalToasterApi })
       .executeScriptInTerminal('remix.execute(\'test_modal.js\')')
       .useCss()
-      .waitForElementVisible('*[data-id="test_id_1_ModalDialogModalBody-react"]', 60000)
+      .waitForElementVisible('*[data-id="test_id_1_ModalDialogModalBody-react"]', 65000)
       .assert.containsText('*[data-id="test_id_1_ModalDialogModalBody-react"]', 'message 1')
       .modalFooterOKClick('test_id_1_')
       // check the script runner notifications

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

@@ -34,10 +34,15 @@ export const RemixUiCheckbox = ({
   title,
   visibility,
   display = 'flex',
-  tooltipPlacement = 'right-start'
+  tooltipPlacement = 'right'
 }: RemixUiCheckboxProps) => {
 
-  const childJSX = (
+  const childJSXWithTooltip = (
+      <CustomTooltip
+          tooltipText={title}
+          tooltipId={`${name}Tooltip`}
+          placement={tooltipPlacement}
+        >
       <div className="listenOnNetwork_2A0YE0 custom-control custom-checkbox" style={{ display: display, alignItems: 'center', visibility: visibility } as CSSProperties } onClick={onClick}>
         <input
           id={id}
@@ -53,16 +58,27 @@ export const RemixUiCheckbox = ({
           {label}
         </label>
       </div>
+      </CustomTooltip>
     )
+  const childJSX = (
+    <div className="listenOnNetwork_2A0YE0 custom-control custom-checkbox" style={{ display: display, alignItems: 'center', visibility: visibility } as CSSProperties } onClick={onClick}>
+        <input
+          id={id}
+          type={inputType}
+          onChange={onChange}
+          style={{ verticalAlign: 'bottom' }}
+          name={name}
+          className="custom-control-input"
+          checked={checked}
+        />
+        <label className="form-check-label custom-control-label" id={`heading${categoryId}`} style={{ paddingTop: '0.15rem' }}>
+          {name ? <div className="font-weight-bold">{itemName}</div> : ''}
+          {label}
+        </label>
+      </div>
+  )
   return (
-    <CustomTooltip
-      tooltipText={title}
-      tooltipId={`${name}Tooltip`}
-      placement={tooltipPlacement}
-      
-    >
-      {childJSX}
-    </CustomTooltip>
+    title ? (childJSXWithTooltip) : (childJSX)
   )
 }
 

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

@@ -4,7 +4,7 @@ import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { CustomTooltipType } from '../../types/customtooltip'
 
 
-export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses }: CustomTooltipType) {
+export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses, delay }: CustomTooltipType) {
 
   return (
     <Fragment>
@@ -15,6 +15,7 @@ export function CustomTooltip({ children, placement, tooltipId, tooltipClasses,
             {typeof tooltipText === 'string' ? (<span className={tooltipTextClasses}>{tooltipText}</span>) : (tooltipText)}
           </Tooltip>
         }
+        delay={delay}
       >
         {children}
       </OverlayTrigger>

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

@@ -1,5 +1,5 @@
 import { Placement } from 'react-bootstrap/esm/Overlay'
-import { OverlayTriggerRenderProps } from 'react-bootstrap/esm/OverlayTrigger'
+import { OverlayDelay, OverlayTriggerRenderProps } from 'react-bootstrap/esm/OverlayTrigger'
 
 export type CustomTooltipType = {
   children: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ((props: OverlayTriggerRenderProps) => React.ReactNode),
@@ -8,4 +8,5 @@ export type CustomTooltipType = {
   tooltipClasses?:string,
   tooltipText: string | JSX.Element,
   tooltipTextClasses?: string
+  delay?: OverlayDelay
 }

libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx

@@ -17,12 +17,12 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     display: '',
     content: ''
   })
-  const [atAddressOptions, setAtAddressOptions] = useState<{ title: string, disabled: boolean }>({
+  const [atAddressOptions, setAtAddressOptions] = useState<{ title: string | JSX.Element, disabled: boolean }>({
     title: 'address of contract',
     disabled: true
   })
   const [loadedAddress, setLoadedAddress] = useState<string>('')
-  const [contractOptions, setContractOptions] = useState<{ title: string, disabled: boolean }>({
+  const [contractOptions, setContractOptions] = useState<{ title: string | JSX.Element, disabled: boolean }>({
     title: 'Please compile *.sol file to deploy or access a contract',
     disabled: true
   })
@@ -136,12 +136,12 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     if (enable) {
       setAtAddressOptions({
         disabled: false,
-        title: 'Interact with the deployed contract - requires the .abi file or compiled .sol file to be selected in the editor (with the same compiler configuration)'
+        title: <span className="text-start">Interact with the deployed contract - requires the .abi file or <br /> compiled .sol file to be selected in the editor <br />(with the same compiler configuration)</span>
       })
     } else {
       setAtAddressOptions({
         disabled: true,
-        title: loadedAddress ? 'Compile a *.sol file or select a *.abi file.' : 'To interact with a deployed contract, enter its address and compile its source *.sol file (with the same compiler settings) or select its .abi file in the editor. '
+        title: loadedAddress ? 'Compile a *.sol file or select a *.abi file.' : <span className="text-start">To interact with a deployed contract, either<br /> enter its address and compile its source *.sol file <br />(with the same compiler settings) or select its .abi file in the editor. </span>
       })
     }
   }
@@ -155,7 +155,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     } else {
       setContractOptions({
         disabled: true,
-        title: loadType === 'sol' ? 'Select and compile *.sol file to deploy or access a contract.' : 'When there is a compiled .sol file, the choice of contracts to deploy or to use with AtAddress is made here.'
+        title: loadType === 'sol' ? 'Select and compile *.sol file to deploy or access a contract.' : <span className="text-start">When there is a compiled .sol file, choose the <br /> contract to deploy or to use with AtAddress.'</span>
       })
     }
   }
@@ -236,7 +236,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
 
   const checkSumWarning = () => {
     return (
-      <span>
+      <span className="text-start">
         It seems you are not using a checksumed address.
         <br />A checksummed address is an address that contains uppercase letters, as specified in <a href="https://eips.ethereum.org/EIPS/eip-55" target="_blank" rel="noreferrer">EIP-55</a>.
         <br />Checksummed addresses are meant to help prevent users from sending transactions to the wrong address.
@@ -264,10 +264,12 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
         {props.remixdActivated ?
           (<CustomTooltip
             placement={'right'}
-            tooltipClasses="text-wrap"
+            tooltipClasses="text-wrap text-left"
             tooltipId="info-sync-compiled-contract"
-            tooltipText="Click here to import contracts compiled from an external framework.
-              This action is enabled when Remix is connected to an external framework (hardhat, truffle, foundry) through remixd."
+            tooltipText={<span className="text-left">
+              Click here to import contracts compiled from an external framework.<br/>
+              This action is enabled when Remix is connected to an external<br/> framework (hardhat, truffle, foundry) through remixd.
+            </span>}
           >
             <button className="btn d-flex py-0" onClick={_ => {
               props.syncContracts()
@@ -281,17 +283,19 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
       <div className="udapp_subcontainer">
         <CustomTooltip
           placement={"right"}
-          tooltipClasses="text-nowrap"
+          tooltipClasses="text-nowrap text-left"
           tooltipId="remixUdappContractNamesTooltip"
           tooltipText={contractOptions.title}
         >
-          <select ref={contractsRef} value={currentContract} onChange={handleContractChange} className="udapp_contractNames custom-select" disabled={contractOptions.disabled} style={{ display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block' }}>
-            {(contractList[currentFile] || []).map((contract, index) => {
-              return <option key={index} value={contract.alias}>
-                {contract.alias} - {contract.file}
-              </option>
-            })}
-          </select>
+          <div id="udappcontractNamesWrapper" className="w-100">
+            <select ref={contractsRef} value={currentContract} onChange={handleContractChange} className="udapp_contractNames custom-select" disabled={contractOptions.disabled} style={{ display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block', pointerEvents: contractOptions.disabled ? 'none' : 'auto' }}>
+              {(contractList[currentFile] || []).map((contract, index) => {
+                return <option key={index} value={contract.alias}>
+                  {contract.alias} - {contract.file}
+                </option>
+              })}
+            </select>
+          </div>
         </CustomTooltip>
         <span className="py-1" style={{ display: abiLabel.display }}>{abiLabel.content}</span>
       </div>
@@ -324,9 +328,9 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
                 />
                 <CustomTooltip
                   placement={'right'}
-                  tooltipClasses="text-wrap"
+                  tooltipClasses="text-wrap text-left"
                   tooltipId="remixIpfsUdappTooltip"
-                  tooltipText="Publishing the source code and metadata to IPFS facilitates source code verification using Sourcify and will greatly foster contract adoption (auditing, debugging, calling it, etc...)"
+                  tooltipText={<span className="text-start">Publishing the source code and metadata to IPFS facilitates<br/> source code verification using Sourcify and will greatly foster<br/> contract adoption (auditing, debugging, calling it, etc...)</span>}
                 >
                   <label
                     htmlFor="deployAndRunPublishToIPFS"
@@ -346,7 +350,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
         <div className="udapp_button udapp_atAddressSect ">
           <CustomTooltip
             placement={'top-end'}
-            tooltipClasses="text-wrap"
+            tooltipClasses="text-wrap text-left"
             tooltipId="runAndDeployAddresstooltip"
             tooltipText={atAddressOptions.title}
             >
@@ -358,9 +362,9 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
           </CustomTooltip>
           <CustomTooltip
             placement={'top-end'}
-            tooltipClasses="text-wrap"
+            tooltipClasses="text-wrap text-left"
             tooltipId="runAndDeployAddressInputtooltip"
-            tooltipText={"address of contract"}
+            tooltipText={"Address of contract"}
           >
             <input
               ref={atAddressValue}

libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx

@@ -556,7 +556,9 @@ export function ContractGUI (props: ContractGUIProps) {
                   <label className="mt-2 text-left d-block">
                     Proxy Address :
                   </label>
-                  <input style={{ height: 32 }} className="form-control udapp_input" data-id="ERC1967AddressInput" placeholder='proxy address' title='Enter previously deployed proxy address on the selected network' onChange={handleSetProxyAddress} onBlur={() => validateProxyAddress(proxyAddress) } />
+                  <CustomTooltip placement="right" tooltipText={'Enter previously deployed proxy address on the selected network'}>
+                    <input style={{ height: 32 }} className="form-control udapp_input" data-id="ERC1967AddressInput" placeholder='proxy address' onChange={handleSetProxyAddress} onBlur={() => validateProxyAddress(proxyAddress) } />
+                  </CustomTooltip>
                   { proxyAddressError && <span className='text-lowercase' data-id="errorMsgProxyAddress" style={{ fontSize: '.8em' }}>{ proxyAddressError }</span> }
                 </div> :
                 <span className='text-capitalize' data-id="lastDeployedERC1967Address" style={{ fontSize: '.8em' }}>{ proxyAddress || proxyAddressError }</span>

libs/remix-ui/run-tab/src/lib/components/environment.tsx

@@ -28,14 +28,12 @@ export function EnvironmentUI (props: EnvironmentProps) {
     <div className="udapp_crow">
       <label id="selectExEnv" className="udapp_settingsLabel">
         <FormattedMessage id='udapp.environment' defaultMessage='Environment' />
-        <CustomTooltip
-          placement={'right'}
-          tooltipClasses="text-nowrap"
-          tooltipId="info-recorder"
-          tooltipText="Open chainlist and add a new provider for the chain you want to interact to."
-        >
-          <a href='https://chainlist.org/' target='_blank'><i style={{ fontSize: 'medium' }} className={'ml-2 fad fa-plug'} aria-hidden="true"></i></a>
-          </CustomTooltip>
+
+        <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="info-recorder"
+                tooltipText="Open chainlist.org and get the connection specs of the chain you want to interact with.">
+              <a href='https://chainlist.org/' target='_blank'><i style={{ fontSize: 'medium' }} className={'ml-2 fad fa-plug'} aria-hidden="true"></i></a>
+        </CustomTooltip>
+
       </label>
       <div className="udapp_environment">
         <Dropdown id="selectExEnvOptions" data-id="settingsSelectEnvOptions" className='udapp_selectExEnvOptions'>
@@ -67,14 +65,10 @@ export function EnvironmentUI (props: EnvironmentProps) {
             }
           </Dropdown.Menu>
         </Dropdown>
-        <CustomTooltip
-          placement={'bottom-start'}
-          tooltipClasses="text-wrap"
-          tooltipId="runAndDeployAddresstooltip"
-          tooltipText={<FormattedMessage
-          id='udapp.environmentDocs'
-          defaultMessage='Click for docs about Environment' />}
-        >
+
+        <CustomTooltip placement={'right-start'} tooltipClasses="text-wrap" tooltipId="runAndDeployAddresstooltip"
+            tooltipText={<FormattedMessage id='udapp.environmentDocs' defaultMessage='Click for docs about Environment' />}>
+
           <a href="https://remix-ide.readthedocs.io/en/latest/run.html#environment" target="_blank" rel="noreferrer"><i className="udapp_infoDeployAction ml-2 fas fa-info"></i></a>
         </CustomTooltip>
       </div>

libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx

@@ -13,7 +13,7 @@ export function GasPriceUI (props: GasPriceProps) {
     <div className="udapp_crow">
       <label className="udapp_settingsLabel"><FormattedMessage id='udapp.gasLimit' defaultMessage='Gas limit' /></label>
       <CustomTooltip
-        placement={'right-end'}
+        placement={'right'}
         tooltipClasses="text-nowrap"
         tooltipId="remixGasPriceTooltip"
         tooltipText={"The default gas limit is 3M. Adjust as needed."}

libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx

@@ -46,7 +46,7 @@ export function RecorderUI (props: RecorderProps) {
           placement={'right'}
           tooltipClasses="text-wrap"
           tooltipId="info-recorder"
-          tooltipText="Save transactions (deployed contracts and function executions) and replay them in another environment e.g Transactions created in Remix VM can be replayed in the Injected Provider."
+          tooltipText={<span>Save transactions (deployed contracts and function executions) <br />and replay them in another environment e.g Transactions created <br />in Remix VM can be replayed in the Injected Provider.</span>}
           >
           <i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle align-self-center'} aria-hidden="true"></i>
         </CustomTooltip>
@@ -64,7 +64,7 @@ export function RecorderUI (props: RecorderProps) {
             placement={'right'}
             tooltipClasses="text-wrap"
             tooltipId="tooltip-livemode-recorder"
-            tooltipText="If contracts are updated after recording transactions, checking this box will run recorded transactions with the latest copy of the compiled contracts"
+            tooltipText={<span>If contracts are updated after recording transactions,<br/> checking this box will run recorded transactions <br/>with the latest copy of the compiled contracts</span>}
           >
             <label className="form-check-label custom-control-label" data-id="runtabLivemodeInput" htmlFor="livemode-recorder">Run transactions using the latest compilation result</label>
           </CustomTooltip>

libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx

@@ -336,7 +336,7 @@ export function UniversalDappUI (props: UdappProps) {
               placement={"bottom-end"}
               tooltipClasses="text-wrap"
               tooltipId="receiveEthDocstoolTip"
-              tooltipText={"check out docs for using 'receive'/'fallback'"}
+              tooltipText={"Click for docs about using 'receive'/'fallback'"}
             >
               <a
                 href="https://solidity.readthedocs.io/en/v0.6.2/contracts.html#receive-ether-function"

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

@@ -862,7 +862,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
                 tooltipText={<span>{'Language specification available from   Compiler >= v0.5.7'}</span>}
               >
                 <div id="compilerLanguageSelectorWrapper">
-                  <select onChange={(e) => handleLanguageChange(e.target.value)} disabled={state.useFileConfiguration} value={state.language} className="custom-select" id="compilierLanguageSelector">
+                  <select onChange={(e) => handleLanguageChange(e.target.value)} disabled={state.useFileConfiguration} value={state.language} className="custom-select" id="compilierLanguageSelector" style={{ pointerEvents: state.useFileConfiguration ? 'none' : 'auto' }}>
                     <option data-id={state.language === 'Solidity' ? 'selected' : ''} value='Solidity'>Solidity</option>
                     <option data-id={state.language === 'Yul' ? 'selected' : ''} value='Yul'>Yul</option>
                   </select>
@@ -977,7 +977,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               disabled={(configFilePath === '' && state.useFileConfiguration) || disableCompileButton}
             >
               <CustomTooltip
-                placement="auto"
+                placement="right"
                 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>}
@@ -990,7 +990,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               </CustomTooltip>
             </button>
             <CustomTooltip
-              placement="auto"
+              placement="right"
               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>
@@ -1004,7 +1004,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
                       contract ContractName {'{}'}<br />
                     </code>
                   </pre>
-                  Click to know more
+                  Click the i icon to learn more
                 </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>

libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx

@@ -19,12 +19,12 @@ const StaticAnalyserButton = ({
   return (
     <button className={classList} disabled={disabled} onClick={onClick}>
       <CustomTooltip
-        placement="bottom-start"
+        placement="right"
         tooltipId="ssaRunButtonTooltip"
         tooltipClasses="text-nowrap"
         tooltipText={title}
       >
-        <span>
+        <span className="pl-3 pr-4">
           {buttonText}
         </span>
       </CustomTooltip>

libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx

@@ -458,7 +458,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
               expand={false}
             >
               <div>
-                <RemixUiCheckbox onClick={() => handleCheckOrUncheckCategory(category)} id={categoryId} inputType="checkbox" label={`Select ${category[0].categoryDisplayName}`} name='checkCategoryEntry' checked={category.map(x => x._index.toString()).every(el => categoryIndex.includes(el))} onChange={() => {}}/>
+                <RemixUiCheckbox onClick={() => handleCheckOrUncheckCategory(category)} id={categoryId} inputType="checkbox" label={`Select ${category[0].categoryDisplayName}`} name='checkCategoryEntry' checked={category.map(x => x._index.toString()).every(el => categoryIndex.includes(el))} onChange={() => {}} title={category[0].categoryDisplayName} tooltipPlacement="right"/>
               </div>
               <div className="w-100 d-block px-2 my-1 entries collapse multi-collapse" id={`heading${categoryId}`}>
                 {category.map((item, i) => {

libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx

@@ -1,3 +1,4 @@
+import { CustomTooltip } from '@remix-ui/helper'
 import React from 'react'
 import BasicLogo from './BasicLogo'
 interface HomeProps {
@@ -6,16 +7,20 @@ interface HomeProps {
 
 function Home ({ verticalIconPlugin }: HomeProps) {
   return (
-    <div
-      className="mt-2 my-1 remixui_homeIcon"
-      onClick={async () => await verticalIconPlugin.activateHome()}
-      {...{ plugin: 'home'}}
-      title="Home"
-      data-id="verticalIconsHomeIcon"
-      id="verticalIconsHomeIcon"
+    <CustomTooltip
+      placement="right"
+      tooltipText={"Home"}
     >
-      <BasicLogo />
-    </div>
+      <div
+        className="mt-2 my-1 remixui_homeIcon"
+        onClick={async () => await verticalIconPlugin.activateHome()}
+        {...{ plugin: 'home'}}
+        data-id="verticalIconsHomeIcon"
+        id="verticalIconsHomeIcon"
+      >
+        <BasicLogo />
+      </div>
+    </CustomTooltip>
   )
 }
 

libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx

@@ -5,6 +5,7 @@ import Badge from './Badge'
 import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
 import { Plugin } from '@remixproject/engine'
 import { IconRecord } from '../types'
+import { CustomTooltip } from '@remix-ui/helper'
 
 export interface IconStatus {
     key: string
@@ -84,27 +85,33 @@ const Icon = ({
 
   return (
     <>
-      <div
-        className={`remixui_icon m-2  pt-1`}
-        onClick={() => {
-          (verticalIconPlugin as any).toggle(name)
-        }}
-        {...{plugin: name}}
-        title={title}
-        onContextMenu={(e: any) => {
-          e.preventDefault()
-          e.stopPropagation()
-          handleContextMenu(e)
-        }}
-        data-id={`verticalIconsKind${name}`}
-        id={`verticalIconsKind${name}`}
-        ref={iconRef}
+      <CustomTooltip
+        placement={name === 'settings' ? 'right' : name === 'search' ? 'bottom' :
+          name === 'udapp' ? 'bottom' : "top"}
+        tooltipText={title}
+        delay={{ show: 1000, hide: 0 }}
       >
-        <img data-id={iconRecord.active ? `selected`: ''} className={`${theme === 'dark' ? 'invert' : ''} ${theme} remixui_image ${iconRecord.active ? `selected-${theme}`:''}`} src={icon} alt={name} />
-          <Badge
-            badgeStatus={badgeStatus}
-          />
-      </div>
+        <div
+          className={`remixui_icon m-2  pt-1`}
+          onClick={() => {
+            (verticalIconPlugin as any).toggle(name)
+          }}
+          {...{plugin: name}}
+          onContextMenu={(e: any) => {
+            e.preventDefault()
+            e.stopPropagation()
+            handleContextMenu(e)
+          }}
+          data-id={`verticalIconsKind${name}`}
+          id={`verticalIconsKind${name}`}
+          ref={iconRef}
+        >
+          <img data-id={iconRecord.active ? `selected`: ''} className={`${theme === 'dark' ? 'invert' : ''} ${theme} remixui_image ${iconRecord.active ? `selected-${theme}`:''}`} src={icon} alt={name} />
+            <Badge
+              badgeStatus={badgeStatus}
+            />
+        </div>
+      </CustomTooltip>
       {showContext ? (
         <VerticalIconsContextMenu
           pageX={pageX}

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

@@ -24,7 +24,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
         action: 'publishToGist',
         title: 'Publish all the current workspace files to a github gist',
         icon: 'fab fa-github',
-        placement: 'top-start'
+        placement: 'bottom-start'
       },
       {
         action: 'uploadFile',
@@ -36,7 +36,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
         action: 'updateGist',
         title: 'Update the current [gist] explorer',
         icon: 'fab fa-github',
-        placement: 'right-start'
+        placement: 'bottom-start'
       }
     ].filter(item => props.menuItems && props.menuItems.find((name) => { return name === item.action })),
     actions: {}