fix tooltips

src/components/board-header/board-header.module.css

@@ -28,14 +28,28 @@
   width: 90%;
 }
 
+.offlineIconWrapper {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 10px;
+  line-height: 1;
+}
+
 .offlineIcon {
- display: inline-block;
- margin-left: 10px;
- width: 16px;
- height: 16px;
- background-repeat: no-repeat;
- background-size: contain;
- image-rendering: pixelated;
+  width: 16px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  image-rendering: pixelated;
+  display: inline-block;
+}
+
+.redOfflineIcon {
+  background-image: var(--offline-icon);
+}
+
+.yellowOfflineIcon {
+  background-image: var(--offline-loading-icon);
 }
 
 @media (max-width: 640px) {

src/components/board-header/board-header.tsx

@@ -7,6 +7,7 @@ import { useMultisubMetadata } from '../../hooks/use-default-subplebbits';
 import useIsMobile from '../../hooks/use-is-mobile';
 import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline';
 import { shouldShowSnow } from '../../lib/snow';
+import Tooltip from '../tooltip';
 
 const totalBanners = 61;
 
@@ -47,7 +48,11 @@ const BoardHeader = () => {
       <div className={styles.boardTitle}>
         {title || (shortAddress ? (shortAddress.endsWith('.eth') || shortAddress.endsWith('.sol') ? shortAddress.slice(0, -4) : shortAddress) : subplebbitAddress)}
         {(isOffline || isOnlineStatusLoading) && !isInAllView && !isInSubscriptionsView && (
-          <span className={`${styles.offlineIcon} ${offlineIconClass}`} title={offlineTitle} />
+          <span className={styles.offlineIconWrapper}>
+            <Tooltip content={offlineTitle}>
+              <span className={`${styles.offlineIcon} ${offlineIconClass}`} />
+            </Tooltip>
+          </span>
         )}
       </div>
       <div className={styles.boardSubtitle}>{subtitle}</div>