From 7b21ee8a64d17fc37c2fe7756261f5c57332a021 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 22 Sep 2022 11:32:05 +0100
Subject: [PATCH] add custom tooltip to generate tests input and button

---
 .../src/lib/solidity-unit-testing.tsx         | 60 ++++++++++++-------
 1 file changed, 38 insertions(+), 22 deletions(-)

diff --git a/libs/remix-ui/solidity-unit-testing/src/lib/solidity-unit-testing.tsx b/libs/remix-ui/solidity-unit-testing/src/lib/solidity-unit-testing.tsx
index ff7b12801a..9b6e18e44b 100644
--- a/libs/remix-ui/solidity-unit-testing/src/lib/solidity-unit-testing.tsx
+++ b/libs/remix-ui/solidity-unit-testing/src/lib/solidity-unit-testing.tsx
@@ -199,7 +199,7 @@ export const SolidityUnitTesting = (props: Record<string, any>) => { // eslint-d
         if (await testTabLogic.pathExists(testDirInput)) {
           setDisableCreateButton(true)
           setDisableGenerateButton(false)
-          
+
         } else {
           // Enable Create button
           setDisableCreateButton(false)
@@ -674,28 +674,44 @@ export const SolidityUnitTesting = (props: Record<string, any>) => { // eslint-d
               })
             }
             </datalist>
-            <input
-              list="utPathList"
-              className="inputFolder custom-select"
-              id="utPath"
-              data-id="uiPathInput"
-              name="utPath"
-              value={inputPathValue}
-              title="Press 'Enter' to change the path for test files."
-              style={{ backgroundImage: "var(--primary)" }}
-              onKeyDown={() => { if (inputPathValue === '/') setInputPathValue('')} }
-              onChange={handleTestDirInput}
-              onClick = {() => { if (inputPathValue === '/') setInputPathValue('')} }
-            />
-            <button
-              className="btn border ml-2"
-              data-id="testTabGenerateTestFolder"
-              title="Create a test folder"
-              disabled={disableCreateButton}
-              onClick={handleCreateFolder}
+            <OverlayTrigger
+              placement="top-end"
+              overlay={
+                <Tooltip className="text-nowrap" id="uiPathInputtooltip">
+                  <span>{"Press 'Enter' to change the path for test files."}</span>
+                </Tooltip>
+              }
             >
-              Create
-            </button>
+              <input
+                list="utPathList"
+                className="inputFolder custom-select"
+                id="utPath"
+                data-id="uiPathInput"
+                name="utPath"
+                value={inputPathValue}
+                style={{ backgroundImage: "var(--primary)" }}
+                onKeyDown={() => { if (inputPathValue === '/') setInputPathValue('')} }
+                onChange={handleTestDirInput}
+                onClick = {() => { if (inputPathValue === '/') setInputPathValue('')} }
+              />
+            </OverlayTrigger>
+            <OverlayTrigger
+              placement="top-end"
+              overlay={
+                <Tooltip className="text-nowrap" id="uiPathInputButtontooltip">
+                  <span>Create a test folder</span>
+                </Tooltip>
+              }
+            >
+              <button
+                className="btn border ml-2"
+                data-id="testTabGenerateTestFolder"
+                disabled={disableCreateButton}
+                onClick={handleCreateFolder}
+              >
+                Create
+              </button>
+            </OverlayTrigger>
           </div>
         </div>
       </div>