add custom tooltips to debugger-ui and home-tab. modify custom tooltip further

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

@@ -6,7 +6,7 @@ import VmDebuggerHead from './vm-debugger/vm-debugger-head' // eslint-disable-li
 import { TransactionDebugger as Debugger } from '@remix-project/remix-debug' // eslint-disable-line
 import { DebuggerUIProps } from './idebugger-api' // eslint-disable-line
 import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
-import { isValidHash } from '@remix-ui/helper'
+import { CustomTooltip, isValidHash } from '@remix-ui/helper'
 /* eslint-disable-next-line */
 import './debugger-ui.css'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
@@ -346,19 +346,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     triggerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.trigger.bind(state.debugger.vmDebuggerLogic.event) : null
   }
 
-  return (
+  const customJSX = (
-    <div>
+    <span className="p-0 m-0">
-      <Toaster message={state.toastMessage} />
-      <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 } }
@@ -366,7 +355,20 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
             }} 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>
+  )
+  return (
+    <div>
+      <Toaster message={state.toastMessage} />
+      <div className="px-2" ref={debuggerTopRef}>
+        <div>
+          <div className="mt-2 mb-2 debuggerConfig custom-control custom-checkbox">
+          <CustomTooltip
+            tooltipId="debuggerGenSourceCheckbox"
+            tooltipText={"Debug with generated sources"}
+            placement="top-start"
+          >
+            {customJSX}
+          </CustomTooltip>
           </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,3 +1,4 @@
+import { CustomTooltip } from '@remix-ui/helper'
 import React, { useState, useEffect, useRef } from 'react'  //eslint-disable-line
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import './tx-browser.css'
@@ -46,7 +47,20 @@ export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, t
   const txInputOnInput = () => {
     updateTxNumberFlag(!inputValue.current.value)
   }
-
+  const customJSX = (
+    <div id="debuggerTransactionStartButtonContainer" data-id="debuggerTransactionStartButton" onClick={handleSubmit} className="btn btn-primary btn-sm btn-block text-decoration-none">
+              <button
+                className='btn btn-link btn-sm btn-block h-75 p-0 m-0 text-decoration-none'
+                id='load'
+                onClick={handleSubmit}
+                data-id='debuggerTransactionStartButton'
+                disabled={!state.txNumber }
+                style={{ pointerEvents: 'none', color: 'white' }}
+              >
+                  <span>{ debugging ? 'Stop' : 'Start' } debugging</span>
+              </button>
+            </div>
+  )
   return (
     <div className='pb-2 container px-0'>
       <div className='txContainer'>
@@ -65,29 +79,14 @@ export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, t
           />
         </div>
         <div className='d-flex justify-content-center w-100 btn-group py-1'>
-          <OverlayTrigger
+          <CustomTooltip
-            placement={'bottom'}
+            placement="bottom"
-            overlay={
+            tooltipText={debugging ? 'Stop debugging' : 'Start debugging'}
-              <Tooltip className={'text-nowrap'} id={'debuggingButtontooltip'}>
+            tooltipId={'debuggingButtontooltip'}
-                <span>
+            tooltipClasses="text-nowrap"
-                  {debugging ? 'Stop debugging' : 'Start debugging'}
-                </span>
-              </Tooltip>
-            }
           >
-            <div id="debuggerTransactionStartButtonContainer" data-id="debuggerTransactionStartButton" onClick={handleSubmit} className="btn btn-primary btn-sm btn-block text-decoration-none">
+            {customJSX}
-              <button
+          </CustomTooltip>
-                className='btn btn-link btn-sm btn-block h-75 p-0 m-0 text-decoration-none'
-                id='load'
-                onClick={handleSubmit}
-                data-id='debuggerTransactionStartButton'
-                disabled={!state.txNumber }
-                style={{ pointerEvents: 'none', color: 'white' }}
-              >
-                  <span>{ debugging ? 'Stop' : 'Start' } debugging</span>
-              </button>
-            </div>
-          </OverlayTrigger>
         </div>
       </div>
       <span id='error' />

libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx

@@ -4,7 +4,7 @@ import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { CustomTooltipType } from '../../types/customtooltip'
 
 
-export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText }: CustomTooltipType) {
+export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses }: CustomTooltipType) {
 
   return (
     <Fragment>
@@ -12,7 +12,7 @@ export function CustomTooltip({ children, placement, tooltipId, tooltipClasses,
         placement={placement}
         overlay={
           <Tooltip id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} className={tooltipClasses}>
-            <span>{tooltipText}</span>
+            <span className={tooltipTextClasses}>{tooltipText}</span>
           </Tooltip>
         }
       >

libs/remix-ui/helper/src/types/customtooltip.ts

@@ -6,5 +6,6 @@ export type CustomTooltipType = {
   placement?: Placement,
   tooltipId?: string,
   tooltipClasses?:string,
-  tooltipText: string
+  tooltipText: string,
+  tooltipTextClasses?: string
 }

libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx

@@ -4,6 +4,7 @@ import BasicLogo from 'libs/remix-ui/vertical-icons-panel/src/lib/components/Bas
 import { ThemeContext } from '../themeContext'
 import React, { useEffect, useState, useRef, useContext } from 'react'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'// eslint-disable-line
+import { CustomTooltip } from '@remix-ui/helper'
 
 function HomeTabTitle() {
   useEffect(() => {
@@ -61,60 +62,70 @@ function HomeTabTitle() {
       <div className="d-flex justify-content-between">
         <span className="h-80 text-uppercase" style={{ fontSize: 'xx-large', fontFamily: "Noah, sans-serif" }}>Remix</span>
         <span>
-          <OverlayTrigger placement={'top'} overlay={
+          <CustomTooltip
-            <Tooltip className="text-nowrap" id="overlay-tooltip">
+            placement={'top'}
-              <span className="border bg-light text-dark p-1 pr-3">Remix Youtube Playlist</span>
+            tooltipId="overlay-tooltip"
-            </Tooltip>
+            tooltipClasses="text-nowrap"
-          }>
+            tooltipText="Remix Youtube Playlist"
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+          >
             <button
               onClick={() => openLink("https://www.youtube.com/channel/UCjTUPyFEr2xDGN6Cg8nKDaA")}
               className="border-0 h-100 btn fab fa-youtube">
             </button>
-          </OverlayTrigger>
+          </CustomTooltip>
 
-          <OverlayTrigger placement={'top'} overlay={
+          <CustomTooltip
-            <Tooltip className="text-nowrap" id="overlay-tooltip">
+            placement={'top'}
-              <span className="border bg-light text-dark p-1 pr-3">Remix Twitter Profile</span>
+            tooltipId="overlay-tooltip"
-            </Tooltip>
+            tooltipClasses="text-nowrap"
-          }>
+            tooltipText="Remix Twitter Profile"
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+          >
             <button
               onClick={() => openLink("https://twitter.com/EthereumRemix")}
               className="border-0 h-100 pl-2 btn fab fa-twitter">
             </button>
-          </OverlayTrigger>
+          </CustomTooltip>
 
-          <OverlayTrigger placement={'top'} overlay={
+          <CustomTooltip
-            <Tooltip className="text-nowrap" id="overlay-tooltip">
+            placement={'top'}
-              <span className="border bg-light text-dark p-1 pr-3">Remix Linkedin Profile</span>
+            tooltipId="overlay-tooltip"
-            </Tooltip>
+            tooltipClasses="text-nowrap"
-          }>
+            tooltipText="Remix Linkedin Profile"
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+          >
             <button
               onClick={() => openLink("https://www.linkedin.com/company/ethereum-remix/")}
               className="border-0 h-100 pl-2 btn fa fa-linkedin">
             </button>
-          </OverlayTrigger>
+          </CustomTooltip>
 
-          <OverlayTrigger placement={'top'} overlay={
+          <CustomTooltip
-            <Tooltip className="text-nowrap" id="overlay-tooltip">
+            placement={'top'}
-              <span className="border bg-light text-dark p-1 pr-3">Remix Medium Posts</span>
+            tooltipId="overlay-tooltip"
-            </Tooltip>
+            tooltipClasses="text-nowrap"
-          }>
+            tooltipText="Remix Medium Posts"
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+          >
             <button
               onClick={() => openLink("https://medium.com/remix-ide")}
               className="border-0 h-100 pl-2 btn fab fa-medium">
             </button>
-          </OverlayTrigger>
+          </CustomTooltip>
 
-          <OverlayTrigger placement={'top'} overlay={
+          <CustomTooltip
-            <Tooltip className="text-nowrap" id="overlay-tooltip">
+            placement={'top'}
-              <span className="border bg-light text-dark p-1 pr-3">Remix Gitter channel</span>
+            tooltipId="overlay-tooltip"
-            </Tooltip>
+            tooltipClasses="text-nowrap"
-          }>
+            tooltipText="Remix Gitter Channel"
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+          >
             <button
               onClick={() => openLink("https://gitter.im/ethereum/remix")}
               className="border-0 h-100 pl-2 btn fab fa-gitter">
             </button>
-          </OverlayTrigger>
+          </CustomTooltip>
         </span>
       </div>
       <b className="pb-1 text-dark" style={{ fontStyle: 'italic' }}>The Native IDE for Web3 Development.</b>

libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx

@@ -2,6 +2,7 @@
 import React, { useContext } from 'react'
 import { ThemeContext } from '../themeContext'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
+import { CustomTooltip } from '@remix-ui/helper'
 interface PluginButtonProps {
   imgPath: string,
   envID: string,
@@ -30,13 +31,13 @@ function PluginButton ({ imgPath, envID, envText, callback, l2, description, rem
       </button>
       { l2 && <label className="bg-light mx-1 px-1 mb-0 mx-2 position-absolute remixui_home_l2Label">L2</label> }
       { remixMaintained &&
-        <OverlayTrigger placement="bottom" overlay={
+        <CustomTooltip
-          <Tooltip id="overlay-tooltip-run-script">
+          placement="bottom"
-            <span>Maintained by Remix</span>
+          tooltipId="overlay-tooltip-run-script"
-          </Tooltip>
+          tooltipText={'Maintained by Remix'}
-        }>
+        >
           <i className="bg-light text-success mx-1 px-1 mb-0 mx-2 position-absolute remixui_home_maintainedLabel fas fa-check"></i>
-        </OverlayTrigger>
+        </CustomTooltip>
       }
 
     </div>