finished switching native browser tooltips to custom in Run and Deploy Transactions

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

@@ -302,22 +302,27 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
                 savedProxyAddress={proxyKey}
               />
               <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
-                <input
-                  id="deployAndRunPublishToIPFS"
-                  data-id="contractDropdownIpfsCheckbox"
-                  className="form-check-input custom-control-input"
-                  type="checkbox"
-                  onChange={handleCheckedIPFS}
-                  checked={props.ipfsCheckedState}
-                />
-                <label
-                  htmlFor="deployAndRunPublishToIPFS"
-                  data-id="contractDropdownIpfsCheckboxLabel"
-                  className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
-                  title="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...)"
-                >
-                  Publish to IPFS
-                </label>
+                  <input
+                    id="deployAndRunPublishToIPFS"
+                    data-id="contractDropdownIpfsCheckbox"
+                    className="form-check-input custom-control-input"
+                    type="checkbox"
+                    onChange={handleCheckedIPFS}
+                    checked={props.ipfsCheckedState}
+                  />
+                <OverlayTrigger placement={'right'} overlay={
+                  <Tooltip className="text-nowrap" id="remixIpfsUdappTooltip">
+                    <span>{"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...)"}</span>
+                  </Tooltip>
+                }>
+                  <label
+                    htmlFor="deployAndRunPublishToIPFS"
+                    data-id="contractDropdownIpfsCheckboxLabel"
+                    className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
+                  >
+                    Publish to IPFS
+                  </label>
+                </OverlayTrigger>
               </div>
             </div> : ''
           }

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

@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import * as remixLib from '@remix-project/remix-lib'
 import { ContractGUIProps } from '../types'
 import { CopyToClipboard } from '@remix-ui/clipboard'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 
 const txFormat = remixLib.execution.txFormat
 const txHelper = remixLib.execution.txHelper
@@ -235,15 +236,26 @@ export function ContractGUI (props: ContractGUIProps) {
   return (
     <div className={`udapp_contractProperty ${(props.funcABI.inputs && props.funcABI.inputs.length > 0) || (props.funcABI.type === 'fallback') || (props.funcABI.type === 'receive') ? 'udapp_hasArgs' : ''}`}>
       <div className="udapp_contractActionsContainerSingle pt-2" style={{ display: toggleContainer ? 'none' : 'flex' }}>
-        <button onClick={handleActionClick} title={buttonOptions.title} className={`udapp_instanceButton ${props.widthClass} btn btn-sm ${buttonOptions.classList}`} data-id={buttonOptions.dataId}>{title}</button>
+        <OverlayTrigger placement={'right'} overlay={
+          <Tooltip className="text-nowrap" id="remixUdappInstanceButtonTooltip">
+            <span>{buttonOptions.title}</span>
+          </Tooltip>
+        }>
+        <button onClick={handleActionClick} className={`udapp_instanceButton ${props.widthClass} btn btn-sm ${buttonOptions.classList}`} data-id={buttonOptions.dataId}>{title}</button>
+        </OverlayTrigger>
+        <OverlayTrigger placement={'right'} overlay={
+          <Tooltip className="text-nowrap" id="remixUdappInstanceButtonTooltip">
+            <span>{props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : props.inputs}</span>
+          </Tooltip>
+        }>
         <input
           className="form-control"
           data-id={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : 'multiParamManagerBasicInputField'}
           placeholder={props.inputs}
-          title={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : props.inputs}
           onChange={handleBasicInput}
           ref={basicInputRef}
           style={{ visibility: !((props.funcABI.inputs && props.funcABI.inputs.length > 0) || (props.funcABI.type === 'fallback') || (props.funcABI.type === 'receive')) ? 'hidden' : 'visible' }} />
+        </OverlayTrigger>
         <i
           className="fas fa-angle-down udapp_methCaret"
           onClick={switchMethodViewOn}
@@ -313,7 +325,7 @@ export function ContractGUI (props: ContractGUIProps) {
             </div>
             <div>
               {
-                props.initializerOptions && props.initializerOptions.initializeInputs ? 
+                props.initializerOptions && props.initializerOptions.initializeInputs ?
                 <span onClick={handleToggleDeployProxy}>
                   <i className={!toggleDeployProxy ? 'fas fa-angle-right pt-2' : 'fas fa-angle-down'} aria-hidden="true"></i>
                 </span> : null

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

@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { GasPriceProps } from '../types'
 
 export function GasPriceUI (props: GasPriceProps) {
@@ -10,7 +11,13 @@ export function GasPriceUI (props: GasPriceProps) {
   return (
     <div className="udapp_crow">
       <label className="udapp_settingsLabel">Gas limit</label>
-      <input type="number" className="form-control udapp_gasNval udapp_col2" title="The default gas limit is 3M. Adjust as needed." id="gasLimit" value={props.gasLimit} onChange={handleGasLimit} />
+      <OverlayTrigger placement={'right-end'} overlay={
+          <Tooltip className="text-nowrap" id="remixGasPriceTooltip">
+            <span>{"The default gas limit is 3M. Adjust as needed."}</span>
+          </Tooltip>
+      }>
+        <input type="number" className="form-control udapp_gasNval udapp_col2" id="gasLimit" value={props.gasLimit} onChange={handleGasLimit} />
+      </OverlayTrigger>
     </div>
   )
 }

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

@@ -59,19 +59,33 @@ export function RecorderUI (props: RecorderProps) {
           </OverlayTrigger>
         </div>
         <div className="mb-1 mt-1 udapp_transactionActions">
-        <OverlayTrigger placement={'right'} overlay={
-          <Tooltip className="text-nowrap" id="tooltip-save-recorder">
-            <span>Save {props.count} transaction{props.count === 1 ? '' : 's'} as scenario file</span>
+        <OverlayTrigger placement={'bottom-start'} overlay={
+          <Tooltip className="text-nowrap" id="remixUdappTransactionSavetooltip">
+            <span>
+              {
+                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>
         }>
-          <button className="btn btn-sm btn-info savetransaction udapp_recorder" title={props.count === 0 ? 'No transactions to save' : ''} disabled={props.count === 0 ? true: false} onClick={triggerRecordButton}>Save</button>
+          <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>
         }>
-          <button className="btn btn-sm btn-info runtransaction udapp_runTxs" data-id="runtransaction" title={enableRunButton ? 'No scenario file selected' : ''} disabled={enableRunButton} onClick={handleClickRunButton}>Run</button>
+          <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>
         </div>
       </div>

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

@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { BN } from 'ethereumjs-util'
 import { 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)
@@ -49,6 +50,11 @@ 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>
+        }>
         <input
           ref={inputValue}
           type="number"
@@ -58,11 +64,11 @@ export function ValueUI (props: ValueProps) {
           className="form-control udapp_gasNval udapp_col2"
           id="value"
           data-id="dandrValue"
-          title="Enter an amount and choose its unit"
           onKeyPress={validateInputKey}
           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') }}>
           <option data-unit="wei" value='wei'>Wei</option>
           <option data-unit="gwei" value="gwei">Gwei</option>