basic tooltip to sections

libs/remix-ui/statusbar/src/lib/components/gitStatus.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, Dispatch } from 'react'
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { StatusBar } from 'apps/remix-ide/src/app/components/status-bar'
 import '../../css/statusbar.css'
+import { CustomTooltip } from '@remix-ui/helper'
 
 export interface GitStatusProps {
   plugin: StatusBar
@@ -50,13 +51,17 @@ export default function GitStatus({ plugin, gitBranchName, setGitBranchName }: G
   }
 
   return (
-    <div
-      className="d-flex flex-row pl-3 text-white justify-content-center align-items-center remixui_statusbar_gitstatus"
-      onClick={async () => await lightDgitUp()}
+    <CustomTooltip
+      tooltipText={`${gitBranchName} (Git)`}
     >
-      {gitBranchName.length > 0 && gitBranchName !== 'Not a git repo' && <span className="fa-regular fa-code-branch ml-1"></span>}
-      <span className="small mx-1">{`${gitBranchName}`}</span>
-      {gitBranchName.length > 0 && gitBranchName !== 'Not a git repo' && <span className="fa-solid fa-arrows-rotate fa-1"></span>}
-    </div>
+      <div
+        className="d-flex flex-row pl-3 text-white justify-content-center align-items-center remixui_statusbar_gitstatus"
+        onClick={async () => await lightDgitUp()}
+      >
+        {gitBranchName.length > 0 && gitBranchName !== 'Not a git repo' && <span className="fa-regular fa-code-branch ml-1"></span>}
+        <span className="small mx-1">{`${gitBranchName}`}</span>
+        {gitBranchName.length > 0 && gitBranchName !== 'Not a git repo' && <span className="fa-solid fa-arrows-rotate fa-1"></span>}
+      </div>
+    </CustomTooltip>
   )
 }

libs/remix-ui/statusbar/src/lib/components/scamAlertStatus.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import { ExtendedRefs, ReferenceType } from '@floating-ui/react'
+import { CustomTooltip } from '@remix-ui/helper'
 
 export interface ScamAlertStatusProps {
   refs: ExtendedRefs<ReferenceType>
@@ -11,12 +12,16 @@ export default function ScamAlertStatus ({ refs, getReferenceProps }: ScamAlertS
 
   return (
     <>
-      <div className="mr-2 d-flex align-items-center justify-content-center" id="hTScamAlertSection" ref={refs.setReference} {...getReferenceProps()}>
-        <span className="pr-2 far fa-exclamation-triangle text-danger"></span>
-        <span className="text-white font-semibold small">
-          <FormattedMessage id="home.scamAlert" />
-        </span>
-      </div>
+      <CustomTooltip
+        tooltipText={"Scam Alerts"}
+      >
+        <div className="mr-2 d-flex align-items-center justify-content-center" id="hTScamAlertSection" ref={refs.setReference} {...getReferenceProps()}>
+          <span className="pr-2 far fa-exclamation-triangle text-danger"></span>
+          <span className="text-white font-semibold small">
+            <FormattedMessage id="home.scamAlert" />
+          </span>
+        </div>
+      </CustomTooltip>
     </>
   )
 }