adding tooltips to home buttons

apps/remix-ide/src/app/tabs/locales/en/home.json

@@ -57,7 +57,9 @@
   "home.files": "Files",
   "home.newFile": "New File",
   "home.startCoding": "Start Coding",
+  "home.startCodingPlayground": "Open a playground for prototyping and simply learning",
   "home.openFile": "Open File",
+  "home.openFileTooltip": "Open a File from you File System",
   "home.accessFileSystem": "Access File System",
   "home.loadFrom": "Load from",
   "home.resources": "Resources",

apps/remix-ide/src/app/tabs/locales/es/home.json

@@ -55,6 +55,7 @@
   "home.files": "Files",
   "home.newFile": "New File",
   "home.openFile": "Open File",
+  "home.openFileTooltip": "Open a File from you File System",
   "home.connectToLocalhost": "Access File System",
   "home.loadFrom": "Load from",
   "home.resources": "Resources"

apps/remix-ide/src/app/tabs/locales/fr/home.json

@@ -55,6 +55,7 @@
   "home.files": "Files",
   "home.newFile": "New File",
   "home.openFile": "Open File",
+  "home.openFileTooltip": "Open a File from you File System",
   "home.connectToLocalhost": "Access File System",
   "home.loadFrom": "Load from",
   "home.resources": "Resources"

apps/remix-ide/src/app/tabs/locales/zh/home.json

@@ -55,7 +55,9 @@
   "home.files": "文件",
   "home.newFile": "新建文件",
   "home.startCoding": "Start Coding",
+  "home.startCodingPlayground": "Open a playground for prototyping and simply learning",
   "home.openFile": "打开本地文件",
+  "home.openFileTooltip": "Open a File from you File System",
   "home.connectToLocalhost": "连接本地主机",
   "home.loadFrom": "从以下来源导入",
   "home.resources": "资源"

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

@@ -244,40 +244,33 @@ function HomeTabFile({ plugin }: HomeTabFileProps) {
         </label>
         <div className="d-flex flex-column">
           <div className="d-flex flex-row">
+            <CustomTooltip
+              placement={'top'}
+              tooltipId="overlay-tooltip"
+              tooltipClasses="text-nowrap"
+              tooltipText={<FormattedMessage id='home.startCodingPlayground' />}
+              tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+            >
               <button className="btn btn-primary text-nowrap p-2 mr-2 border my-1" data-id="homeTabStartCoding" style={{ width: 'fit-content' }} onClick={() => startCoding()}>
                 <FormattedMessage id="home.startCoding" />
               </button>
-            <label className="btn text-nowrap p-2 mr-2 border my-1" style={{ width: 'fit-content', cursor: 'pointer' }} htmlFor="openFileInput">
-              <FormattedMessage id="home.openFile" />
-            </label>
-            <input
-              title="open file"
-              type="file"
-              id="openFileInput"
-              onChange={(event) => {
-                event.stopPropagation()
-                plugin.verticalIcons.select('filePanel')
-                uploadFile(event.target)
-              }}
-              multiple
-            />
+            </CustomTooltip>
             <CustomTooltip
               placement={'top'}
               tooltipId="overlay-tooltip"
               tooltipClasses="text-nowrap"
-              tooltipText={<FormattedMessage id='home.openFile' />}
+              tooltipText={<FormattedMessage id='home.openFileTooltip' />}
               tooltipTextClasses="border bg-light text-dark p-1 pr-3"
             >
               <span>
-                <label className="btn p-2 mr-2 border my-1" style={{width: 'fit-content', cursor: 'pointer'}} htmlFor="openFileInput">
-                  <FormattedMessage id='home.openFile' />
+                <label className="btn text-nowrap p-2 mr-2 border my-1" style={{ width: 'fit-content', cursor: 'pointer' }} htmlFor="openFileInput">
+                  <FormattedMessage id="home.openFile" />
                 </label>
                 <input
                   title="open file"
                   type="file"
                   id="openFileInput"
-                  onChange={
-                    (event) => {
+                  onChange={(event) => {
                     event.stopPropagation()
                     plugin.verticalIcons.select('filePanel')
                     uploadFile(event.target)