finish adding tooltips to debugger

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react' // eslint-disable-line
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import './button-navigator.css'
 
 export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward, stepOverForward, jumpOut, jumpPreviousBreakpoint, jumpNextBreakpoint, jumpToException, revertedReason, stepState, jumpOutDisabled }) => {
@@ -53,16 +54,93 @@ 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 fas fa-reply' title='Step over back' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} ></button>
+        <button id='overback' className='btn btn-primary btn-sm navigator stepButton' title='Step over back' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} >
-        <button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm navigator stepButton fas fa-level-up-alt' title='Step back' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled}></button>
+          <OverlayTrigger
-        <button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm navigator stepButton fas fa-level-down-alt' title='Step into' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled}></button>
+            placement="top-start"
-        <button id='overforward' className='btn btn-primary btn-sm navigator stepButton fas fa-share' title='Step over forward' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled}></button>
+            overlay={
+              <Tooltip className="text-nowrap" id="overbackTooltip">
+                <span>Step over back</span>
+              </Tooltip>
+            }
+          >
+            <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}>
+          <OverlayTrigger
+            placement="top-start"
+            overlay={
+              <Tooltip className="text-nowrap" id="intobackTooltip">
+                <span>Step back</span>
+              </Tooltip>
+            }
+          >
+            <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}>
+          <OverlayTrigger
+            placement="top-start"
+            overlay={
+              <Tooltip className="text-nowrap" id="intoforwardTooltip">
+                <span>Step into</span>
+              </Tooltip>
+            }
+          >
+            <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}>
+          <OverlayTrigger
+            placement="top-end"
+            overlay={
+              <Tooltip className="text-nowrap" id="overforwardTooltip">
+                <span>Step into</span>
+              </Tooltip>
+            }
+          >
+            <span className="fas fa-share"></span>
+          </OverlayTrigger>
+        </button>
       </div>
 
       <div className="jumpButtons btn-group py-1">
-        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-step-backward' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" title='Jump to the previous breakpoint' onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled}></button>
+        <button className='btn btn-primary btn-sm navigator jumpButton' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled}>
-        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-eject' id='jumpout' title='Jump out' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled}></button>
+          <OverlayTrigger
-        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-step-forward' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" title='Jump to the next breakpoint' onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled}></button>
+            placement="top-end"
+            overlay={
+              <Tooltip id="jumppreviousbreakpointTooltip" className="text-nowrap">
+                <span>{'Jump to the previous breakpoint'}</span>
+              </Tooltip>
+            }
+          >
+            <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}>
+          <OverlayTrigger
+            placement="top-end"
+            overlay={
+              <Tooltip id="jumpoutTooltip" className="text-nowrap">
+                <span>{'Jump out'}</span>
+              </Tooltip>
+            }
+          >
+            <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}>
+          <OverlayTrigger
+            placement="top-end"
+            overlay={
+              <Tooltip id="jumpnextbreakpointTooltip" className="text-nowrap">
+                <span>{'Jump to the next breakpoint'}</span>
+              </Tooltip>
+            }
+          >
+            <span className="fas fa-step-forward"></span>
+          </OverlayTrigger>
+        </button>
       </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>