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>

src/components/tooltip/tooltip.module.css

@@ -1,6 +1,6 @@
 .tooltip {
   position: absolute;
-  background-color: #181f24;
+  background-color: var(--tooltip-background-color);
   font-size: 11px;
   line-height: 13px;
   padding: 3px 6px;
@@ -9,7 +9,6 @@
   white-space: pre-line;
   max-width: 400px;
   color: #fff;
-  overflow: hidden;
   text-align: center;
 }
 
@@ -21,7 +20,7 @@
   position: absolute;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
-  border-top: 4px solid #181f24;
+  border-top: 4px solid var(--tooltip-background-color);
   margin-left: -4px;
   bottom: -4px;
   left: 50%;