refactor: inline tooltip for the icons in popup page

source/Popup/Header.module.scss

@@ -29,6 +29,16 @@
   gap: 0.25rem;
 }
 
+.iconWrapper {
+  position: relative;
+  display: inline-flex;
+
+  &:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
 .styledIcon {
   background-color: transparent;
   box-shadow: none;
@@ -39,3 +49,34 @@
     color: $gray-600;
   }
 }
+
+.tooltip {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.375rem 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: $medium;
+  white-space: nowrap;
+  color: $white;
+  background-color: $gray-800;
+  border-radius: $radius-sm;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  transition: opacity $transition-fast, visibility $transition-fast;
+  z-index: 100;
+  pointer-events: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0.25rem;
+    border-style: solid;
+    border-color: transparent transparent $gray-800 transparent;
+  }
+}

source/Popup/Header.tsx

@@ -84,26 +84,32 @@ function Header() {
       </a>
 
       <div className={styles.actions}>
+        <span className={styles.iconWrapper}>
           <Icon
             onClick={fetchUserDomains}
             name={iconToShow}
-          title="Refresh"
             className={clsx('icon', styles.styledIcon)}
           />
+          <span className={styles.tooltip}>Sync account</span>
+        </span>
         {extensionSettingsState.history && (
+          <span className={styles.iconWrapper}>
             <Icon
               onClick={openHistoryPage}
               name="clock"
               className={clsx('icon', styles.styledIcon)}
-            title="History"
             />
+            <span className={styles.tooltip}>History</span>
+          </span>
         )}
+        <span className={styles.iconWrapper}>
           <Icon
             onClick={openExtOptionsPage}
             name="settings"
             className={clsx('icon', styles.styledIcon)}
-          title="Settings"
           />
+          <span className={styles.tooltip}>Settings</span>
+        </span>
       </div>
     </header>
   );