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) => {
@@ -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">
+          <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 } }) => {

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>