add checkbox and button tooltips

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

@@ -9,6 +9,7 @@ import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
 import { isValidHash } from '@remix-ui/helper'
 /* eslint-disable-next-line */
 import './debugger-ui.css'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 const _paq = (window as any)._paq = (window as any)._paq || []
 
 export const DebuggerUI = (props: DebuggerUIProps) => {
@@ -121,7 +122,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     })
 
     debuggerInstance.event.register('newSourceLocation', async (lineColumnPos, rawLocation, generatedSources, address) => {
-      if (!lineColumnPos) {        
+      if (!lineColumnPos) {
         await debuggerModule.discardHighlight()
         setState(prevState => {
           return { ...prevState, sourceLocationStatus: 'Source location not available, neither in Sourcify nor in Etherscan. Please make sure the Etherscan api key is provided in the settings.' }
@@ -351,12 +352,21 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       <div className="px-2" ref={debuggerTopRef}>
         <div>
           <div className="mt-2 mb-2 debuggerConfig custom-control custom-checkbox">
-            <input className="custom-control-input" id="debugGeneratedSourcesInput" onChange={({ target: { checked } }) => {
+          <OverlayTrigger overlay={
+            <Tooltip id="debuggerGenSourceCheckbox">
+              <span>{"Debug with generated sources"}</span>
+            </Tooltip>
+          } placement="top-start"
+          >
+            <span className="p-0 m-0">
+              <input className="custom-control-input" id="debugGeneratedSourcesInput" onChange={({ target: { checked } }) => {
               setState(prevState => {
                 return { ...prevState, opt: { ...prevState.opt, debugWithGeneratedSources: checked } }
               })
-            }} type="checkbox" title="Debug with generated sources" />
+            }} type="checkbox" />
             <label data-id="debugGeneratedSourcesLabel" className="form-check-label custom-control-label" htmlFor="debugGeneratedSourcesInput">Use generated sources (Solidity {'>='} v0.7.2)</label>
+            </span>
+          </OverlayTrigger>
           </div>
           { state.isLocalNodeUsed && <div className="mb-2 debuggerConfig custom-control custom-checkbox">
             <input className="custom-control-input" id="debugWithLocalNodeInput" onChange={({ target: { checked } }) => {
@@ -371,11 +381,11 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
         </div>
         <TxBrowser requestDebug={ requestDebug } unloadRequested={ unloadRequested } updateTxNumberFlag={ updateTxNumberFlag } transactionNumber={ state.txNumber } debugging={ state.debugging } />
         { state.debugging && state.sourceLocationStatus && <div className="text-warning"><i className="fas fa-exclamation-triangle" aria-hidden="true"></i> {state.sourceLocationStatus}</div> }
-        { !state.debugging && 
+        { !state.debugging &&
         <div>
           <i className="fas fa-info-triangle" aria-hidden="true"></i>
           <span>
-            When Debugging with a transaction hash, 
+            When Debugging with a transaction hash,
             if the contract is verified, Remix will try to fetch the source code from Sourcify or Etherscan. Put in your Etherscan API key in the Remix settings.
             For supported networks, please see: <a href="https://sourcify.dev" target="__blank" >https://sourcify.dev</a> & <a href="https://etherscan.io/contractsVerified" target="__blank">https://etherscan.io/contractsVerified</a>
           </span>

libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'  //eslint-disable-line
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import './tx-browser.css'
 
 export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, transactionNumber, debugging }) => {
@@ -67,12 +68,22 @@ export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, t
           <button
             className='btn btn-primary btn-sm txbutton'
             id='load'
-            title={debugging ? 'Stop debugging' : 'Start debugging'}
             onClick={handleSubmit}
             data-id='debuggerTransactionStartButton'
             disabled={!state.txNumber }
           >
-            { debugging ? 'Stop' : 'Start' } debugging
+            <OverlayTrigger
+              placement={'bottom-start'}
+              overlay={
+                <Tooltip className={'text-nowrap'} id={'debuggingButtontooltip'}>
+                  <span>
+                    {debugging ? 'Stop debugging' : 'Start debugging'}
+                  </span>
+                </Tooltip>
+              }
+            >
+              <span>{ debugging ? 'Stop' : 'Start' } debugging</span>
+            </OverlayTrigger>
           </button>
         </div>
       </div>