diff --git a/libs/remix-ui/run-tab/src/lib/components/account.tsx b/libs/remix-ui/run-tab/src/lib/components/account.tsx
index 0dd64facc9..a74652ca61 100644
--- a/libs/remix-ui/run-tab/src/lib/components/account.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/account.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState, useRef } from 'react'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { AccountProps } from '../types'
 import { PassphrasePrompt } from './passphrase'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { CustomTooltip } from '@remix-ui/helper'
 
 export function AccountUI (props: AccountProps) {
   const { selectedAccount, loadedAccounts } = props.accounts
@@ -151,15 +151,16 @@ export function AccountUI (props: AccountProps) {
     <div className="udapp_crow">
       <label className="udapp_settingsLabel">
         Account
-        <OverlayTrigger placement={'top-start'} overlay={
-          <Tooltip className="text-wrap" id="remixPlusWrapperTooltip">
-            <span>{plusOpt.title}</span>
-          </Tooltip>
-          }>
+        <CustomTooltip
+          placement={'top-start'}
+          tooltipClasses="text-wrap"
+          tooltipId="remixPlusWrapperTooltip"
+          tooltipText={plusOpt.title}
+        >
             <span id="remixRunPlusWraper">
               <i id="remixRunPlus" className={`fas fa-plus-circle udapp_icon ${plusOpt.classList}`} aria-hidden="true" onClick={newAccount}></i>
             </span>
-        </OverlayTrigger>
+        </CustomTooltip>
       </label>
       <div className="udapp_account">
         <select id="txorigin" data-id="runTabSelectAccount" name="txorigin" className="form-control udapp_select custom-select pr-4" value={selectedAccount} onChange={(e) => { props.setAccount(e.target.value) }}>
@@ -168,13 +169,14 @@ export function AccountUI (props: AccountProps) {
           }
         </select>
         <div style={{ marginLeft: -5 }}><CopyToClipboard tip='Copy account to clipboard' content={selectedAccount} direction='top' /></div>
-        <OverlayTrigger placement={'top-start'} overlay={
-          <Tooltip className="text-nowrap" id="remixSignMsgTooltip">
-            <span>{"Sign a message using this account"}</span>
-          </Tooltip>
-          }>
+        <CustomTooltip
+          placement={'top-start'}
+          tooltipClasses="text-nowrap"
+          tooltipId="remixSignMsgTooltip"
+          tooltipText={"Sign a message using this account"}
+        >
           <i id="remixRunSignMsg" data-id="settingsRemixRunSignMsg" className="mx-1 fas fa-edit udapp_icon" aria-hidden="true" onClick={signMessage}></i>
-        </OverlayTrigger>
+        </CustomTooltip>
       </div>
     </div>
   )
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index 0d5ad43701..b02b9fb504 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -2,10 +2,9 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { ContractDropdownProps, DeployMode } from '../types'
 import { ContractData, FuncABI } from '@remix-project/core-plugin'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
 import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
-import { deployWithProxyMsg, upgradeWithProxyMsg } from '@remix-ui/helper'
+import { CustomTooltip, deployWithProxyMsg, upgradeWithProxyMsg } from '@remix-ui/helper'
 const _paq = window._paq = window._paq || []
 
 export function ContractDropdownUI(props: ContractDropdownProps) {
@@ -259,41 +258,37 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
           <div className="d-flex">{compilerName && compilerName !== '' && <label className="text-capitalize" style={{ maxHeight: '0.6rem', lineHeight: '1rem' }} data-id="udappCompiledBy">(Compiled by {compilerName})</label>}</div>
         </div>
         {props.remixdActivated ?
-          <OverlayTrigger placement={'right'} overlay={
-            <Tooltip className="text-nowrap" id="info-sync-compiled-contract">
-              <div>Click here to import contracts compiled from an external framework.</div>
-              <div>This action is enabled when Remix is connected to an external framework (hardhat, truffle, foundry) through remixd.</div>
-            </Tooltip>
-          }>
+          (<CustomTooltip
+            placement={'right'}
+            tooltipClasses="text-wrap"
+            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."
+          >
             <button className="btn d-flex py-0" onClick={_ => {
               props.syncContracts()
               _paq.push(['trackEvent', 'udapp', 'syncContracts', compilationSource])
             }}>
               <i style={{ cursor: 'pointer' }} className="fa fa-refresh mr-2 mt-2" aria-hidden="true"></i>
             </button>
-          </OverlayTrigger>
+          </CustomTooltip>)
           : null}
       </div>
       <div className="udapp_subcontainer">
-        <OverlayTrigger
-              placement={"right"}
-              overlay={
-                <Tooltip
-                  className="text-nowrap"
-                  id="remixUdappContractNamesTooltip"
-                >
-                  <span>{contractOptions.title}</span>
-                </Tooltip>
-              }
-            >
-        <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>
-        </OverlayTrigger>
+        <CustomTooltip
+          placement={"right"}
+          tooltipClasses="text-nowrap"
+          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>
+        </CustomTooltip>
         <span className="py-1" style={{ display: abiLabel.display }}>{abiLabel.content}</span>
       </div>
       <div>
@@ -322,11 +317,12 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
                   onChange={handleCheckedIPFS}
                   checked={props.ipfsCheckedState}
                 />
-                <OverlayTrigger placement={'right'} overlay={
-                  <Tooltip className="text-wrap" id="remixIpfsUdappTooltip">
-                    <span>Publishing the source code and metadata to IPFS facilitates source code verification <br />using Sourcify and will greatly foster contract adoption (auditing, debugging, calling it, etc...)</span>
-                  </Tooltip>
-                }>
+                <CustomTooltip
+                  placement={'right'}
+                  tooltipClasses="text-wrap"
+                  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...)"
+                >
                   <label
                     htmlFor="deployAndRunPublishToIPFS"
                     data-id="contractDropdownIpfsCheckboxLabel"
@@ -334,35 +330,37 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
                   >
                     Publish to IPFS
                   </label>
-                </OverlayTrigger>
+                </CustomTooltip>
               </div>
             </div> : ''
           }
         </div>
         <div className="udapp_orLabel mt-2" style={{ display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block' }}>or</div>
         <div className="udapp_button udapp_atAddressSect ">
-          <OverlayTrigger placement={'top-end'} overlay={
-            <Tooltip className="text-wrap" id="runAndDeployAddresstooltip">
-              <span>{atAddressOptions.title}</span>
-            </Tooltip>
-          }>
+          <CustomTooltip
+            placement={'top-end'}
+            tooltipClasses="text-wrap"
+            tooltipId="runAndDeployAddresstooltip"
+            tooltipText={atAddressOptions.title}
+            >
               <div id="runAndDeployAtAdressButtonContainer" onClick={loadFromAddress} data-title={atAddressOptions.title}>
                 <button className="udapp_atAddress btn btn-sm btn-info" id="runAndDeployAtAdressButton" disabled={atAddressOptions.disabled} style={{ pointerEvents: 'none' }} onClick={loadFromAddress} data-title={atAddressOptions.title}
                 >At Address</button>
               </div>
-          </OverlayTrigger>
-          <OverlayTrigger placement={'top-end'} overlay={
-            <Tooltip className="text-wrap" id="runAndDeployAddressInputtooltip">
-              <span>{"address of contract"}</span>
-            </Tooltip>
-          }>
+          </CustomTooltip>
+          <CustomTooltip
+            placement={'top-end'}
+            tooltipClasses="text-wrap"
+            tooltipId="runAndDeployAddressInputtooltip"
+            tooltipText={"address of contract"}
+          >
             <input
               ref={atAddressValue}
               className="udapp_input udapp_ataddressinput ataddressinput form-control"
               placeholder="Load contract from Address"
               onChange={atAddressChanged}
             />
-          </OverlayTrigger>
+          </CustomTooltip>
         </div>
       </div>
     </div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
index cccbbbbb2e..2b3499f20d 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
@@ -4,6 +4,7 @@ import * as remixLib from '@remix-project/remix-lib'
 import { ContractGUIProps } from '../types'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { CustomTooltip } from '@remix-ui/helper'
 
 const txFormat = remixLib.execution.txFormat
 const txHelper = remixLib.execution.txHelper
@@ -247,16 +248,11 @@ export function ContractGUI (props: ContractGUIProps) {
         className="udapp_contractActionsContainerSingle pt-2"
         style={{ display: toggleContainer ? "none" : "flex" }}
       >
-        <OverlayTrigger
+        <CustomTooltip
           placement={"right-start"}
-          overlay={
-            <Tooltip
-              className="text-wrap"
-              id="remixUdappInstanceButtonTooltip"
-            >
-              <span>{buttonOptions.title}</span>
-            </Tooltip>
-          }
+          tooltipClasses="text-wrap"
+          tooltipId="remixUdappInstanceButtonTooltip"
+          tooltipText={buttonOptions.title}
         >
           <button
             onClick={handleActionClick}
@@ -266,19 +262,13 @@ export function ContractGUI (props: ContractGUIProps) {
           >
             {title}
           </button>
-        </OverlayTrigger>
-        <OverlayTrigger
+        </CustomTooltip>
+        <CustomTooltip
           placement={"right"}
-          overlay={
-            <Tooltip className="text-nowrap" id="remixContractGuiTooltip">
-              <span>
-                {props.funcABI.type === "fallback" ||
-                props.funcABI.type === "receive"
-                  ? `'(${props.funcABI.type}')`
-                  : props.inputs}
-              </span>
-            </Tooltip>
-          }
+          tooltipClasses="text-nowrap"
+          tooltipId="remixContractGuiTooltip"
+          tooltipText={props.funcABI.type === "fallback" ||props.funcABI.type === "receive" ? `'(${props.funcABI.type}')`
+          : props.inputs}
         >
           <input
             className="form-control"
@@ -307,19 +297,26 @@ export function ContractGUI (props: ContractGUIProps) {
                 : "visible",
             }}
           />
-        </OverlayTrigger>
-        <i
-          className="fas fa-angle-down udapp_methCaret"
-          onClick={switchMethodViewOn}
-          title={title}
-          style={{
-            visibility: !(
-              props.funcABI.inputs && props.funcABI.inputs.length > 0
-            )
-              ? "hidden"
-              : "visible",
-          }}
-        ></i>
+        </CustomTooltip>
+        <CustomTooltip
+          tooltipText={title}
+          tooltipClasses="text-nowrap"
+          placement="bottom"
+          tooltipId="switchMethodViewOnTooltip"
+        >
+          <i
+            className="fas fa-angle-down udapp_methCaret"
+            onClick={switchMethodViewOn}
+            title={title}
+            style={{
+              visibility: !(
+                props.funcABI.inputs && props.funcABI.inputs.length > 0
+              )
+                ? "hidden"
+                : "visible",
+            }}
+          ></i>
+        </CustomTooltip>
       </div>
       <div
         className="udapp_contractActionsContainerMulti"
@@ -337,13 +334,11 @@ export function ContractGUI (props: ContractGUIProps) {
               return (
                 <div className="udapp_multiArg" key={index}>
                   <label htmlFor={inp.name}> {inp.name}: </label>
-                  <OverlayTrigger
+                  <CustomTooltip
                     placement="left-end"
-                    overlay={
-                      <Tooltip id="udappContractActionsTooltip" className="text-nowrap">
-                        <span>{inp.name}</span>
-                      </Tooltip>
-                    }
+                    tooltipId="udappContractActionsTooltip"
+                    tooltipClasses="text-nowrap"
+                    tooltipText={inp.name}
                   >
                     <input
                       ref={(el) => {
@@ -353,7 +348,7 @@ export function ContractGUI (props: ContractGUIProps) {
                       placeholder={inp.type}
                       data-id={`multiParamManagerInput${inp.name}`}
                     />
-                  </OverlayTrigger>
+                  </CustomTooltip>
                 </div>
               );
             })}
@@ -389,16 +384,11 @@ export function ContractGUI (props: ContractGUIProps) {
                 <label htmlFor="copyParameters">Parameters</label>
               </button>
             </CopyToClipboard>
-            <OverlayTrigger
+            <CustomTooltip
               placement={"right"}
-              overlay={
-                <Tooltip
-                  className="text-nowrap"
-                  id="remixUdappInstanceButtonTooltip"
-                >
-                  <span>{buttonOptions.title}</span>
-                </Tooltip>
-              }
+              tooltipClasses="text-nowrap"
+              tooltipId="remixUdappInstanceButtonTooltip"
+              tooltipText={buttonOptions.title}
             >
               <button
                 type="button"
@@ -408,7 +398,7 @@ export function ContractGUI (props: ContractGUIProps) {
               >
                 {buttonOptions.content}
               </button>
-            </OverlayTrigger>
+            </CustomTooltip>
           </div>
         </div>
       </div>
@@ -424,14 +414,20 @@ export function ContractGUI (props: ContractGUIProps) {
                 onChange={(e) => handleDeployProxySelect(e.target.checked)}
                 checked={deployState.deploy}
               />
-              <label
-                htmlFor="deployWithProxy"
-                data-id="contractGUIDeployWithProxyLabel"
-                className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
-                title="An ERC1967 proxy contract will be deployed along with the selected implementation contract."
+              <CustomTooltip
+                tooltipText="An ERC1967 proxy contract will be deployed along with the selected implementation contract."
+                placement={"right"}
+                tooltipClasses="text-nowrap"
+                tooltipId="deployWithProxyTooltip"
               >
-                Deploy with Proxy
-              </label>
+                <label
+                  htmlFor="deployWithProxy"
+                  data-id="contractGUIDeployWithProxyLabel"
+                  className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
+                >
+                  Deploy with Proxy
+                </label>
+              </CustomTooltip>
             </div>
             <div>
               {props.initializerOptions &&
@@ -467,15 +463,21 @@ export function ContractGUI (props: ContractGUIProps) {
                         {" "}
                         {inp.name}:{" "}
                       </label>
-                      <input
-                        ref={(el) => {
-                          initializeFields.current[index] = el;
-                        }}
-                        style={{ height: 32 }}
-                        className="form-control udapp_input"
-                        placeholder={inp.type}
-                        title={inp.name}
-                      />
+                      <CustomTooltip
+                        tooltipText={inp.name}
+                        tooltipClasses="text-wrap"
+                        tooltipId="initializeFieldsTooltip"
+                        placement="right"
+                      >
+                        <input
+                          ref={(el) => {
+                            initializeFields.current[index] = el;
+                          }}
+                          style={{ height: 32 }}
+                          className="form-control udapp_input"
+                          placeholder={inp.type}
+                        />
+                      </CustomTooltip>
                     </div>
                   );
                 })}
@@ -492,14 +494,20 @@ export function ContractGUI (props: ContractGUIProps) {
                 onChange={(e) => handleUpgradeImpSelect(e.target.checked)}
                 checked={deployState.upgrade}
               />
-              <label
-                htmlFor="upgradeImplementation"
-                data-id="contractGUIUpgradeImplementationLabel"
-                className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
-                title="The implementation contract will be deployed and then the proxy contract will be updated with new implementation's address."
+              <CustomTooltip
+                tooltipText="The implementation contract will be deployed and then the proxy contract will be updated with new implementation's address."
+                tooltipClasses="text-wrap"
+                tooltipId="upgradeImplementationTooltip"
+                placement="right"
               >
-                Upgrade with Proxy
-              </label>
+                <label
+                  htmlFor="upgradeImplementation"
+                  data-id="contractGUIUpgradeImplementationLabel"
+                  className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
+                >
+                  Upgrade with Proxy
+                </label>
+              </CustomTooltip>
             </div>
             <span onClick={handleToggleUpgradeImp}>
               <i
@@ -527,29 +535,41 @@ export function ContractGUI (props: ContractGUIProps) {
                   onChange={handleUseLastProxySelect}
                   checked={useLastProxy}
                 />
-                <label
-                  htmlFor="proxyAddress"
-                  data-id="contractGUIProxyAddressLabel"
-                  className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
-                  title="Select this option to use the last deployed ERC1967 contract on the current network."
-                  style={{ fontSize: 12 }}
+                <CustomTooltip
+                  tooltipText="Select this option to use the last deployed ERC1967 contract on the current network."
+                  tooltipId="proxyAddressTooltip"
+                  placement="auto"
+                  tooltipClasses="text-wrap"
                 >
-                  Use last deployed ERC1967 contract
-                </label>
+                  <label
+                    htmlFor="proxyAddress"
+                    data-id="contractGUIProxyAddressLabel"
+                    className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
+                    style={{ fontSize: 12 }}
+                  >
+                    Use last deployed ERC1967 contract
+                  </label>
+                </CustomTooltip>
               </div>
               {!useLastProxy ? (
                 <div className="mb-2">
                   <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}
-                  />
+                  <CustomTooltip
+                    tooltipText="Enter previously deployed proxy address on the selected network"
+                    placement="left"
+                    tooltipId="ERC1967AddressInputTooltip"
+                    tooltipClasses="text-nowrap"
+                  >
+                    <input
+                      style={{ height: 32 }}
+                      className="form-control udapp_input"
+                      data-id="ERC1967AddressInput"
+                      placeholder="proxy address"
+                      onChange={handleSetProxyAddress}
+                    />
+                  </CustomTooltip>
                 </div>
               ) : (
                 <span
diff --git a/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx b/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx
index 08fa2843c7..579a103f36 100644
--- a/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { DeployButtonProps } from '../types'
-import { ButtonGroup, Dropdown, OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { ButtonGroup, Dropdown } from 'react-bootstrap'
+import { CustomTooltip } from '@remix-ui/helper'
 
 export function DeployButton (props: DeployButtonProps) {
   const [showOptions, setShowOptions] = useState<boolean>(false)
@@ -24,18 +25,16 @@ export function DeployButton (props: DeployButtonProps) {
           }
         </Dropdown.Menu>
       </Dropdown> : 
-      <OverlayTrigger
+      <CustomTooltip
         placement="right-start"
-        overlay={
-          <Tooltip id="deployButtonTooltip" className="text-nowrap">
-            <span>{props.buttonOptions.title}</span>
-          </Tooltip>
-        }
+        tooltipId="deployButtonTooltip"
+        tooltipClasses="text-nowrap"
+        tooltipText={props.buttonOptions.title}
       >
         <button onClick={props.handleActionClick} className={`udapp_instanceButton ${props.buttonOptions.widthClass} btn btn-sm ${props.buttonOptions.classList}`} data-id={props.buttonOptions.dataId}>
           Deploy
         </button>
-      </OverlayTrigger>
+      </CustomTooltip>
     }
     </>
   )
diff --git a/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx b/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx
index c5dc153e42..d211bfc0b9 100644
--- a/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx
@@ -1,5 +1,5 @@
+import { CustomTooltip } from '@remix-ui/helper'
 import React from 'react'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { DeployInputProps } from '../types'
 import { DeployButton } from './deployButton'
 
@@ -7,13 +7,11 @@ export function DeployInput (props: DeployInputProps) {
   return (
     <div className="udapp_contractActionsContainerSingle pt-2" style={{ display: 'flex' }}>
       <DeployButton buttonOptions={props.buttonOptions} selectedIndex={props.selectedIndex} setSelectedIndex={props.setSelectedIndex} handleActionClick={props.handleActionClick} deployOptions={props.deployOptions} />
-      <OverlayTrigger
+      <CustomTooltip
         placement="right-start"
-        overlay={
-          <Tooltip id="deployInputTooltip" className="text-nowrap">
-            <span>{props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : props.inputs}</span>
-          </Tooltip>
-        }
+        tooltipId="deployInputTooltip"
+        tooltipClasses="text-nowrap"
+        tooltipText={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : props.inputs}
       >
         <input
           className="form-control"
@@ -24,7 +22,7 @@ export function DeployInput (props: DeployInputProps) {
           ref={props.basicInputRef}
           style={{ visibility: !props.inputs ? 'hidden' : 'visible' }}
         />
-      </OverlayTrigger>
+      </CustomTooltip>
     </div>
   )
 }
diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
index b4a875b1b5..af7c0b043d 100644
--- a/libs/remix-ui/run-tab/src/lib/components/environment.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
@@ -2,8 +2,7 @@
 import React from 'react'
 import { EnvironmentProps } from '../types'
 import { Dropdown } from 'react-bootstrap'
-import { CustomMenu, CustomToggle } from '@remix-ui/helper'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
+import { CustomMenu, CustomToggle, CustomTooltip } from '@remix-ui/helper'
 
 export function EnvironmentUI (props: EnvironmentProps) {
 
@@ -29,13 +28,10 @@ export function EnvironmentUI (props: EnvironmentProps) {
   return (
     <div className="udapp_crow">
       <label id="selectExEnv" className="udapp_settingsLabel">
-        Environment <OverlayTrigger placement={'right'} overlay={
-              <Tooltip className="text-nowrap" id="info-recorder">
-                <span>Open chainlist and add a new provider for the chain you want to interact to.</span>
-              </Tooltip>
-            }>
-            <a href='https://chainlist.org/' target='_blank'><i style={{ fontSize: 'medium' }} className={'ml-2 fad fa-plug'} aria-hidden="true"></i></a>
-        </OverlayTrigger>
+        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>
       </label>
       <div className="udapp_environment">
 
@@ -43,13 +39,9 @@ export function EnvironmentUI (props: EnvironmentProps) {
           <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control" icon={null}>
             { isL2(currentProvider) && 'L2 - '}
             { currentProvider && currentProvider.content }
-            { currentProvider && bridges[currentProvider.value] && <OverlayTrigger placement={'right'} overlay={
-              <Tooltip className="text-nowrap" id="info-recorder">
-                <span>Click to open a bridge for converting L1 mainnet ETH to the selected network currency.</span>
-              </Tooltip>
-            }>
+            { currentProvider && bridges[currentProvider.value] && <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText="Click to open a bridge for converting L1 mainnet ETH to the selected network currency.">
             <i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-plug'} aria-hidden="true" onClick={() => { window.open(bridges[currentProvider.value], '_blank') }}></i>
-        </OverlayTrigger>}
+        </CustomTooltip>}
           </Dropdown.Toggle>
           <Dropdown.Menu as={CustomMenu} className='w-100 custom-dropdown-items' data-id="custom-dropdown-items" >
             {
@@ -67,13 +59,10 @@ export function EnvironmentUI (props: EnvironmentProps) {
             }
           </Dropdown.Menu>
         </Dropdown>
-        <OverlayTrigger placement={'bottom-start'} overlay={
-          <Tooltip className="text-wrap" id="runAndDeployAddresstooltip">
-            <span>{"Click for docs about Environment"}</span>
-          </Tooltip>
-        }>
+        <CustomTooltip placement={'bottom-start'} tooltipClasses="text-wrap" tooltipId="runAndDeployAddresstooltip"
+            tooltipText={"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>
-        </OverlayTrigger>
+        </CustomTooltip>
       </div>
     </div>
   )
diff --git a/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx b/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx
index 1dcd3fb57f..f831bdeaf2 100644
--- a/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx
@@ -1,6 +1,6 @@
 // eslint-disable-next-line no-use-before-define
+import { CustomTooltip } from '@remix-ui/helper'
 import React from 'react'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { GasPriceProps } from '../types'
 
 export function GasPriceUI (props: GasPriceProps) {
@@ -11,13 +11,14 @@ export function GasPriceUI (props: GasPriceProps) {
   return (
     <div className="udapp_crow">
       <label className="udapp_settingsLabel">Gas limit</label>
-      <OverlayTrigger placement={'right-end'} overlay={
-          <Tooltip className="text-nowrap" id="remixGasPriceTooltip">
-            <span>{"The default gas limit is 3M. Adjust as needed."}</span>
-          </Tooltip>
-      }>
+      <CustomTooltip
+        placement={'right-end'}
+        tooltipClasses="text-nowrap"
+        tooltipId="remixGasPriceTooltip"
+        tooltipText={"The default gas limit is 3M. Adjust as needed."}
+      >
         <input type="number" className="form-control udapp_gasNval udapp_col2" id="gasLimit" value={props.gasLimit} onChange={handleGasLimit} />
-      </OverlayTrigger>
+      </CustomTooltip>
     </div>
   )
 }
diff --git a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
index 94cb03deba..36a8e0446b 100644
--- a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
@@ -1,6 +1,6 @@
 // eslint-disable-next-line no-use-before-define
+import { CustomTooltip } from '@remix-ui/helper'
 import React from 'react'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { InstanceContainerProps } from '../types'
 import { UniversalDappUI } from './universalDappUI'
 
@@ -14,31 +14,27 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
   return (
     <div className="udapp_instanceContainer mt-3 border-0 list-group-item">
       <div className="d-flex justify-content-between align-items-center pl-2 mb-2">
-        <OverlayTrigger
+        <CustomTooltip
           placement="top-start"
-          overlay={
-            <Tooltip className="text-nowrap" id="deployAndRunClearInstancesTooltip">
-              <span>{"Autogenerated generic user interfaces for interaction with deployed contracts"}</span>
-            </Tooltip>
-          }
+          tooltipClasses="text-nowrap"
+          tooltipId="deployAndRunClearInstancesTooltip"
+          tooltipText={"Autogenerated generic user interfaces for interaction with deployed contracts"}
         >
           <label className="udapp_deployedContracts">
             Deployed Contracts
           </label>
-        </OverlayTrigger>
+        </CustomTooltip>
         { instanceList.length > 0
             ? (
-            <OverlayTrigger
+            <CustomTooltip
               placement="right"
-              overlay={
-                <Tooltip className="text-nowrap" id="deployAndRunClearInstancesTooltip">
-                  <span>{"Clear instances list and reset recorder"}</span>
-                </Tooltip>
-              } 
+              tooltipClasses="text-nowrap"
+              tooltipId="deployAndRunClearInstancesTooltip"
+              tooltipText={"Clear instances list and reset recorder"}
             >
               <i className="mr-2 udapp_icon far fa-trash-alt" data-id="deployAndRunClearInstances" onClick={clearInstance} aria-hidden="true">
               </i>
-            </OverlayTrigger>
+            </CustomTooltip>
             ) : null
           }
       </div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx b/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx
index 8764750402..ca25e8e1b7 100644
--- a/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx
@@ -1,3 +1,4 @@
+import { CustomTooltip } from '@remix-ui/helper'
 import React, { useRef, useState } from 'react'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { MultiDeployInputProps } from '../types'
@@ -17,16 +18,14 @@ export function MultiDeployInput(props: MultiDeployInputProps) {
             return (
               <div className="udapp_multiArg" key={index}>
                 <label htmlFor={inp.name}> {inp.name}: </label>
-                <OverlayTrigger
+                <CustomTooltip
                   placement="left-end"
-                  overlay={
-                    <Tooltip id="udappMultiArgTooltip" className="text-nowrap">
-                      <span>{inp.name}</span>
-                    </Tooltip>
-                  }
+                  tooltipId="udappMultiArgTooltip"
+                  tooltipClasses="text-nowrap"
+                  tooltipText={inp.name}
                 >
                   <input ref={el => { multiFields.current[index] = el }} className="form-control" placeholder={inp.type} data-id={`multiParamManagerInput${inp.name}`} />
-                </OverlayTrigger>
+                </CustomTooltip>
               </div>)
           })}
         </div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
index c413e2ec90..11f63add19 100644
--- a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
@@ -2,6 +2,7 @@
 import React, {useRef, useState, useEffect} from 'react'
 import { RecorderProps } from '../types'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
+import { CustomTooltip } from '@remix-ui/helper'
 
 export function RecorderUI (props: RecorderProps) {
   const inputLive = useRef<HTMLInputElement>()
@@ -31,21 +32,22 @@ export function RecorderUI (props: RecorderProps) {
       <div className="udapp_recorderSection d-flex justify-content-between" onClick={toggleClass}>
         <div className="d-flex justify-content-center align-items-center">
           <label className="mt-1 udapp_recorderSectionLabel">Transactions recorded</label>
-          <OverlayTrigger placement={'right'} overlay={
-          <Tooltip className="text-nowrap" id="recordedTransactionsCounttooltip">
-            <span>{'The number of recorded transactions'}</span>
-          </Tooltip>
-        }>
+          <CustomTooltip
+            placement={'right'}
+            tooltipClasses="text-nowrap"
+            tooltipId="recordedTransactionsCounttooltip"
+            tooltipText={'The number of recorded transactions'}
+          >
           <div className="ml-2 badge badge-pill badge-primary text-center" data-title="The number of recorded transactions">{props.count}</div>
-        </OverlayTrigger>
-        <OverlayTrigger placement={'right'} overlay={
-          <Tooltip className="text-nowrap" id="info-recorder">
-            <span>Save transactions (deployed contracts and function executions) and replay them in another environment. <br/> e.g Transactions created in Remix VM can be replayed in the Injected Provider.
-          </span>
-          </Tooltip>
-        }>
+        </CustomTooltip>
+        <CustomTooltip
+          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."
+          >
           <i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle align-self-center'} aria-hidden="true"></i>
-        </OverlayTrigger>
+        </CustomTooltip>
         </div>
         <div className="p-3">
           <span data-id='udappRecorderTitleExpander' onClick={toggleClass}>
@@ -56,43 +58,44 @@ export function RecorderUI (props: RecorderProps) {
       <div className={`flex-column ${toggleExpander ? "d-flex" : "d-none"}`}>
         <div className="mb-1 mt-1 fmt-2 custom-control custom-checkbox mb-1">
           <input ref={inputLive} type="checkbox" id="livemode-recorder" className="custom-control-input custom-select" name="input-livemode"/>
-          <OverlayTrigger placement={'right'} overlay={
-            <Tooltip className="text-nowrap" id="tooltip-livemode-recorder">
-              <span>If contracts are updated after recording transactions, checking this box<br/>will run recorded transactions with the latest copy of the compiled contracts</span>
-            </Tooltip>
-          }>
-          <label className="form-check-label custom-control-label" data-id="runtabLivemodeInput" htmlFor="livemode-recorder">Run transactions using the latest compilation result</label>
-          </OverlayTrigger>
+          <CustomTooltip
+            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"
+          >
+            <label className="form-check-label custom-control-label" data-id="runtabLivemodeInput" htmlFor="livemode-recorder">Run transactions using the latest compilation result</label>
+          </CustomTooltip>
         </div>
         <div className="mb-1 mt-1 udapp_transactionActions">
-        <OverlayTrigger placement={'bottom-start'} overlay={
-          <Tooltip className="text-nowrap" id="remixUdappTransactionSavetooltip">
-            <span>
-              {
+        <CustomTooltip
+          placement={'bottom-start'}
+          tooltipClasses="text-nowrap"
+          tooltipId="remixUdappTransactionSavetooltip"
+          tooltipText={
                 props.count === 0 ? 'No transactions to save'
                 :  props.count === 1 ? `Save ${props.count} transaction as scenario file`
                 : `Save ${props.count} transactions as scenario file`
               }
-            </span>
-          </Tooltip>
-        }>
+        >
           <span>
             <button className="btn btn-sm btn-info savetransaction udapp_recorder" disabled={props.count === 0 ? true: false} onClick={triggerRecordButton} style={{ pointerEvents: props.count === 0 ? 'none' : 'auto' }}>
               Save
             </button>
           </span>
-        </OverlayTrigger>
-        <OverlayTrigger placement={'right'} overlay={
-          <Tooltip className="text-nowrap" id="tooltip-run-recorder">
-            <span>Run transaction(s) from the current scenario file</span>
-          </Tooltip>
-        }>
+        </CustomTooltip>
+        <CustomTooltip
+          placement={'right'}
+          tooltipClasses="text-nowrap"
+          tooltipId="tooltip-run-recorder"
+          tooltipText="Run transaction(s) from the current scenario file"
+        >
           <span>
             <button className="btn btn-sm btn-info runtransaction udapp_runTxs" data-id="runtransaction" disabled={enableRunButton} onClick={handleClickRunButton} style={{ pointerEvents: enableRunButton ? 'none' : 'auto' }}>
               Run
             </button>
           </span>
-        </OverlayTrigger>
+        </CustomTooltip>
         </div>
       </div>
     </div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
index b9bdfa82ed..4c6b89133b 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -7,9 +7,8 @@ import * as remixLib from '@remix-project/remix-lib'
 import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
 import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
 import { BN } from 'ethereumjs-util'
-import { is0XPrefixed, isHexadecimal, isNumeric, shortenAddress } from '@remix-ui/helper'
+import { CustomTooltip, is0XPrefixed, isHexadecimal, isNumeric, shortenAddress } from '@remix-ui/helper'
 
 const txHelper = remixLib.execution.txHelper
 
@@ -244,13 +243,11 @@ export function UniversalDappUI (props: UdappProps) {
             </button>
           </div>
         </div>
-        <OverlayTrigger
+        <CustomTooltip
           placement="right"
-          overlay={
-            <Tooltip className="text-nowrap" id="udapp_udappCloseTooltip">
-              <span>{'Remove from the list'}</span>
-            </Tooltip>
-          }
+          tooltipClasses="text-nowrap"
+          tooltipId="udapp_udappCloseTooltip"
+          tooltipText="Remove from the list"
         >
           <button
             className="udapp_udappClose mr-1 p-1 btn btn-secondary align-items-center"
@@ -259,7 +256,7 @@ export function UniversalDappUI (props: UdappProps) {
           >
             <i className="udapp_closeIcon fas fa-times" aria-hidden="true"></i>
           </button>
-        </OverlayTrigger>
+        </CustomTooltip>
       </div>
       <div
         className="udapp_cActionsWrapper"
@@ -335,13 +332,11 @@ export function UniversalDappUI (props: UdappProps) {
             <div className="py-2 border-top d-flex justify-content-start flex-grow-1">
               Low level interactions
             </div>
-            <OverlayTrigger
+            <CustomTooltip
               placement={"bottom-end"}
-              overlay={
-                <Tooltip className="text-wrap" id="receiveEthDocstoolTip">
-                  <span>{"check out docs for using 'receive'/'fallback'"}</span>
-                </Tooltip>
-              }
+              tooltipClasses="text-wrap"
+              tooltipId="receiveEthDocstoolTip"
+              tooltipText={"check out docs for using 'receive'/'fallback'"}
             >
               <a
                 href="https://solidity.readthedocs.io/en/v0.6.2/contracts.html#receive-ether-function"
@@ -350,32 +345,28 @@ export function UniversalDappUI (props: UdappProps) {
               >
                 <i aria-hidden="true" className="fas fa-info my-2 mr-1"></i>
               </a>
-            </OverlayTrigger>
+            </CustomTooltip>
           </div>
           <div className="d-flex flex-column align-items-start">
             <label className="">CALLDATA</label>
             <div className="d-flex justify-content-end w-100 align-items-center">
-              <OverlayTrigger
+              <CustomTooltip
                 placement="bottom"
-                overlay={
-                  <Tooltip className="text-nowrap" id="deployAndRunLLTxCalldataInputTooltip">
-                    <span>{"The Calldata to send to fallback function of the contract."}</span>
-                  </Tooltip>
-                }
+                tooltipClasses="text-nowrap"
+                tooltipId="deployAndRunLLTxCalldataInputTooltip"
+                tooltipText="The Calldata to send to fallback function of the contract."
               >
                 <input
                   id="deployAndRunLLTxCalldata"
                   onChange={handleCalldataChange}
                   className="udapp_calldataInput form-control"
                 />
-              </OverlayTrigger>
-              <OverlayTrigger
+              </CustomTooltip>
+              <CustomTooltip
                 placement="right"
-                overlay={
-                  <Tooltip className="text-nowrap" id="deployAndRunLLTxCalldataTooltip">
-                    <span>Send data to contract.</span>
-                  </Tooltip>
-                }
+                tooltipClasses="text-nowrap"
+                tooltipId="deployAndRunLLTxCalldataTooltip"
+                tooltipText="Send data to contract."
               >
                 <button
                   id="deployAndRunLLTxSendTransaction"
@@ -385,7 +376,7 @@ export function UniversalDappUI (props: UdappProps) {
                 >
                   Transact
                 </button>
-              </OverlayTrigger>
+              </CustomTooltip>
             </div>
           </div>
           <div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/value.tsx b/libs/remix-ui/run-tab/src/lib/components/value.tsx
index 3e23867aee..d4cd484a60 100644
--- a/libs/remix-ui/run-tab/src/lib/components/value.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/value.tsx
@@ -1,9 +1,8 @@
 // eslint-disable-next-line no-use-before-define
 import React, { useEffect, useRef, useState } from 'react'
 import { BN } from 'ethereumjs-util'
-import { isNumeric } from '@remix-ui/helper'
+import { CustomTooltip, isNumeric } from '@remix-ui/helper'
 import { ValueProps } from '../types'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 
 export function ValueUI (props: ValueProps) {
   const [sendValue, setSendValue] = useState<string>(props.sendValue)
@@ -50,11 +49,12 @@ export function ValueUI (props: ValueProps) {
     <div className="udapp_crow">
       <label className="udapp_settingsLabel" data-id="remixDRValueLabel">Value</label>
       <div className="udapp_gasValueContainer">
-        <OverlayTrigger placement={'top-start'} overlay={
-          <Tooltip className="text-nowrap" id="remixValueTooltip">
-            <span>{"Enter an amount and choose its unit"}</span>
-          </Tooltip>
-        }>
+        <CustomTooltip
+          placement={'top-start'}
+          tooltipClasses="text-nowrap"
+          tooltipId="remixValueTooltip"
+          tooltipText="Enter an amount and choose its unit"
+        >
         <input
           ref={inputValue}
           type="number"
@@ -68,8 +68,10 @@ export function ValueUI (props: ValueProps) {
           onChange={validateValue}
           value={props.sendValue}
         />
-      </OverlayTrigger>
-        <select name="unit" value={props.sendUnit} className="form-control p-1 udapp_gasNvalUnit udapp_col2_2 custom-select" id="unit" onChange={(e) => { props.setUnit((e.target.value) as 'ether' | 'finney' | 'gwei' | 'wei') }}>
+      </CustomTooltip>
+        
+        <select name="unit"
+        value={props.sendUnit} className="form-control p-1 udapp_gasNvalUnit udapp_col2_2 custom-select" id="unit" onChange={(e) => { props.setUnit((e.target.value) as 'ether' | 'finney' | 'gwei' | 'wei') }}>
           <option data-unit="wei" value='wei'>Wei</option>
           <option data-unit="gwei" value="gwei">Gwei</option>
           <option data-unit="finney" value="finney">Finney</option>