add more custom tioltips

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

@@ -54,7 +54,6 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
   return (
     <div className="buttons">
       <div className="stepButtons btn-group py-1">
-        <button id='overback' className='btn btn-primary btn-sm navigator stepButton' title='Step over back' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} >
         <OverlayTrigger
           placement="top-start"
           overlay={
@@ -63,10 +62,12 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
             </Tooltip>
           }
         >
+          <div onClick={() => { stepOverBack && stepOverBack() }}>
+            <button id='overback' className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} style={{ pointerEvents: 'none' }}>
                 <span className="fas fa-reply"></span>
-          </OverlayTrigger>
             </button>
-        <button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm navigator stepButton' title='Step back' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled}>
+          </div>
+        </OverlayTrigger>
         <OverlayTrigger
           placement="top-start"
           overlay={
@@ -75,10 +76,12 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
             </Tooltip>
           }
         >
+          <div onClick={() => { stepIntoBack && stepIntoBack() }}>
+            <button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled} style={{ pointerEvents: 'none' }}>
                 <span className="fas fa-level-up-alt"></span>
-          </OverlayTrigger>
             </button>
-        <button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm navigator stepButton' title='Step into' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled}>
+          </div>
+        </OverlayTrigger>
         <OverlayTrigger
           placement="top-start"
           overlay={
@@ -86,11 +89,15 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
               <span>Step into</span>
             </Tooltip>
           }
+        >
+          <div onClick={() => { stepIntoForward && stepIntoForward() }}>
+            <button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled}
+            style={{ pointerEvents: 'none' }}
             >
                 <span className="fas fa-level-down-alt"></span>
-          </OverlayTrigger>
             </button>
-        <button id='overforward' className='btn btn-primary btn-sm navigator stepButton' title='Step over forward' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled}>
+          </div>
+        </OverlayTrigger>
         <OverlayTrigger
           placement="top-end"
           overlay={
@@ -99,13 +106,15 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
             </Tooltip>
           }
         >
+          <div onClick={() => { stepOverForward && stepOverForward() }}>
+            <button id='overforward' className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled} style={{ pointerEvents: 'none' }}>
                 <span className="fas fa-share"></span>
-          </OverlayTrigger>
             </button>
           </div>
+        </OverlayTrigger>
+      </div>
 
       <div className="jumpButtons btn-group py-1">
-        <button className='btn btn-primary btn-sm navigator jumpButton' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled}>
           <OverlayTrigger
             placement="top-start"
             overlay={
@@ -114,10 +123,12 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
               </Tooltip>
             }
           >
+            <div onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }}>
+              <button className='btn btn-primary btn-sm navigator jumpButton' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled} style={{ pointerEvents: 'none' }}>
                   <span className="fas fa-step-backward"></span>
-          </OverlayTrigger>
               </button>
-        <button className='btn btn-primary btn-sm navigator jumpButton' id='jumpout' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled}>
+            </div>
+          </OverlayTrigger>
           <OverlayTrigger
             placement="top-end"
             overlay={
@@ -126,10 +137,12 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
               </Tooltip>
             }
           >
+            <div onClick={() => { jumpOut && jumpOut() }}>
+              <button className='btn btn-primary btn-sm navigator jumpButton' id='jumpout' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled} style={{ pointerEvents: 'none' }}>
                   <span className="fas fa-eject"></span>
-          </OverlayTrigger>
               </button>
-        <button className='btn btn-primary btn-sm navigator jumpButton' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled}>
+            </div>
+          </OverlayTrigger>
           <OverlayTrigger
             placement="top-end"
             overlay={
@@ -138,10 +151,13 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
               </Tooltip>
             }
           >
+            <div onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }}>
+              <button className='btn btn-primary btn-sm navigator jumpButton' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled} style={{ pointerEvents: 'none' }}>
                   <span className="fas fa-step-forward"></span>
-          </OverlayTrigger>
               </button>
             </div>
+          </OverlayTrigger>
+      </div>
       <div id='reverted' style={{ display: revertedReason === '' ? 'none' : 'block' }}>
         <span className='text-warning'>This call has reverted, state changes made during the call will be reverted.</span>
         <span className='text-warning' id='outofgas' style={{ display: revertedReason === 'outofgas' ? 'inline' : 'none' }}>This call will run out of gas.</span>

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

@@ -65,13 +65,6 @@ export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, t
           />
         </div>
         <div className='d-flex justify-content-center w-100 btn-group py-1'>
-          <button
-            className='btn btn-primary btn-sm txbutton'
-            id='load'
-            onClick={handleSubmit}
-            data-id='debuggerTransactionStartButton'
-            disabled={!state.txNumber }
-          >
           <OverlayTrigger
             placement={'bottom-start'}
             overlay={
@@ -81,11 +74,21 @@ export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, t
                 </span>
               </Tooltip>
             }
+          >
+            <div onClick={handleSubmit}>
+              <button
+                className='btn btn-primary btn-sm txbutton'
+                id='load'
+                onClick={handleSubmit}
+                data-id='debuggerTransactionStartButton'
+                disabled={!state.txNumber }
+                style={{ pointerEvents: 'none' }}
               >
                   <span>{ debugging ? 'Stop' : 'Start' } debugging</span>
-            </OverlayTrigger>
               </button>
             </div>
+          </OverlayTrigger>
+        </div>
       </div>
       <span id='error' />
     </div>