fix tooltips

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;
 }