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;
+  width: 16px;
- margin-left: 10px;
+  height: 16px;
- width: 16px;
+  background-repeat: no-repeat;
- height: 16px;
+  background-size: contain;
- background-repeat: no-repeat;
+  image-rendering: pixelated;
- background-size: contain;
+  display: inline-block;
- image-rendering: pixelated;
+}
+
+.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%;

src/themes.css

@@ -196,6 +196,9 @@
 
   /* stats */
   --stats-font-size: 11px;
+
+  /* tooltip */
+  --tooltip-background-color: #181f24;
   
   /* topbar */
   --topbar-font-size: 9pt;
@@ -406,6 +409,9 @@
   /* stats */
   --stats-font-size: 11px;
 
+  /* tooltip */
+  --tooltip-background-color: #181f24;
+
   /* topbar */
   --topbar-font-size: 9pt;
   --topbar-separator-color: #89a;
@@ -584,6 +590,9 @@
   /* stats */
   --stats-font-size: 10pt;
 
+  /* tooltip */
+  --tooltip-background-color: #181f24;
+
   /* topbar */
   --topbar-font-size: 11pt;
   --topbar-separator-color: none;
@@ -769,6 +778,9 @@
   /* stats */
   --stats-font-size: 10pt;
 
+  /* tooltip */
+  --tooltip-background-color: #181f24;
+
   /* topbar */
   --topbar-font-size: 11pt;
   --topbar-separator-color: none;
@@ -988,6 +1000,9 @@
   /* stats */
   --stats-font-size: 11px;
 
+  /* tooltip */
+  --tooltip-background-color: #000;
+
   /* topbar */
   --topbar-font-size: 9pt;
   --topbar-separator-color: #c5c8c6;
@@ -1188,6 +1203,9 @@
   /* stats */
   --stats-font-size: 11px;
 
+  /* tooltip */
+  --tooltip-background-color: #181f24;
+
   /* topbar */
   --topbar-font-size: 9pt;
   --topbar-separator-color: #333;

src/views/home/boards-list/boards-list.tsx

@@ -3,13 +3,14 @@ import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { Subplebbit, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
-import { useDefaultSubplebbitTags } from '../../../hooks/use-default-subplebbits-tags';
 import { useDefaultSubplebbitsState } from '../../../hooks/use-default-subplebbits';
+import { useDefaultSubplebbitTags } from '../../../hooks/use-default-subplebbits-tags';
 import useIsMobile from '../../../hooks/use-is-mobile';
 import useIsSubplebbitOffline from '../../../hooks/use-is-subplebbit-offline';
+import LoadingEllipsis from '../../../components/loading-ellipsis';
+import Tooltip from '../../../components/tooltip';
 import styles from '../home.module.css';
 import { nsfwTags } from '../home';
-import LoadingEllipsis from '../../../components/loading-ellipsis';
 
 const Board = ({ subplebbit, isMobile }: { subplebbit: Subplebbit; isMobile: boolean }) => {
   const { t } = useTranslation();
@@ -30,7 +31,13 @@ const Board = ({ subplebbit, isMobile }: { subplebbit: Subplebbit; isMobile: boo
         <p className={styles.boardCell}>
           <Link to={`/p/${address}`}>{displayAddress}</Link>
           {nsfwTag && <span className={styles.nsfw}> ({t(nsfwTag)})</span>}
-          {showOfflineIcon && <span className={`${styles.offlineIcon} ${offlineIconClass}`} title={offlineTitle} />}
+          {showOfflineIcon && (
+            <span className={styles.offlineIconContainer}>
+              <Tooltip content={offlineTitle}>
+                <span className={`${styles.offlineIcon} ${offlineIconClass}`} />
+              </Tooltip>
+            </span>
+          )}
         </p>
       </td>
       <td className={styles.boardTitle}>

src/views/home/home.module.css

@@ -42,14 +42,14 @@
 }
 
 .offlineIcon {
-  display: inline-block;
   vertical-align: text-top;
-  margin-right: 2px;
   width: 13px;
   height: 13px;
   background-repeat: no-repeat;
   background-size: contain;
   image-rendering: pixelated;
+  display: inline-block;
+  position: relative;
 }
 
 .boardsBox table {
@@ -93,6 +93,10 @@
   text-overflow: ellipsis;
 }
 
+.offlineIconContainer {
+  float: right;
+}
+
 .boardCell a {
   color: inherit;
 }