Add tooltip styling and positioning for sidebar toggle button

app/src/components/layout/sidebarLeft/Header.tsx

@@ -28,6 +28,7 @@ const Header: React.FC = () => {
           }
         }}
       >
+        <div className="tooltip">{toggleUI ? "Hide" : "Show"} sidebar</div>
         <ToggleSidebarIcon />
       </button>
     </div>

app/src/styles/layout/sidebar.scss

@@ -41,11 +41,23 @@
       min-height: 32px;
       min-width: 32px;
       border-radius: #{$border-radius-large};
-
+      position: relative;
+      .tooltip {
+        top: 6px;
+        right: -116px;
+        &::after {
+          left: 0px;
+          bottom: 50%;
+        }
+      }
       &:hover {
         outline: 1px solid var(--border-color);
         outline-offset: -1px;
-        background: var(--background-color-drop-down);
+        background: var(--background-color-solid);
+        .tooltip {
+          opacity: 1;
+          transform: translateX(2px);
+        }
       }
     }
 
@@ -379,7 +391,7 @@
     .tooltip {
       top: 6px;
       right: calc(100% + 6px);
-      &::after{
+      &::after {
         left: 100%;
         bottom: 50%;
       }
@@ -399,8 +411,8 @@
 
       &:hover {
         outline-color: var(--border-color-accent);
-        svg{
+        svg {
-          transition: all .2s;
+          transition: all 0.2s;
           scale: 1.1;
         }
         .tooltip {
@@ -414,7 +426,7 @@
       background: var(--background-color-accent);
       outline: none;
       &:hover {
-        svg{
+        svg {
           scale: 1;
         }
         background: var(--background-color-accent);