add tooltips to offline indicator in home

src/components/BoardAvatar.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useSubplebbit } from "@plebbit/plebbit-react-hooks";
 
+
 const BoardAvatar = ({ address }) => {
   const [avatarUrl, setAvatarUrl] = useState("assets/plebchan.png");
   const subplebbit = useSubplebbit({ subplebbitAddress: address });
@@ -14,16 +15,21 @@ const BoardAvatar = ({ address }) => {
   }, [subplebbit.suggested?.avatarUrl, subplebbit]);
 
   return (
-    <div className="board-avatar-container">
-      <img
-        className="board-avatar"
-        alt="board logo"
-        src={avatarUrl}
-      />
-      {!isOnline && (
-        <img className="offline-indicator" alt="offline" src="assets/offline.png" />
-      )}
-    </div>
+    <>
+      <div className="board-avatar-container">
+        <img
+          className="board-avatar"
+          alt="board logo"
+          src={avatarUrl}
+        />
+        {!isOnline && (
+          <img className="offline-indicator" alt="offline" src="assets/offline.png"
+          data-tooltip-id="tooltip"
+          data-tooltip-content="OFFLINE"
+          data-tooltip-place="top" />
+        )}
+      </div>
+    </>
   );
 };
 

src/components/BoardSubscription.jsx

@@ -1,16 +1,19 @@
 import React from "react";
 import { useSubplebbit } from "@plebbit/plebbit-react-hooks";
+import { Tooltip } from 'react-tooltip';
+
 
 const BoardSubscription = ({ address }) => {
-
   const subplebbit = useSubplebbit({ subplebbitAddress: address });
   const isOnline = subplebbit.updatedAt > Date.now() / 1000 - 60 * 20;
 
-
   return (
     <>
-      &nbsp;{address}{!isOnline && (
-        <img className="disconnected" alt="offline" src="assets/offline.png" />
+      {address}&nbsp;{!isOnline && (
+        <img className="disconnected" alt="offline" src="assets/offline.png"
+        data-tooltip-id="tooltip"
+        data-tooltip-content="OFFLINE"
+        data-tooltip-place="top" />
       )}
     </>
   );

src/components/views/Home.jsx

@@ -1,12 +1,13 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Helmet } from 'react-helmet-async';
-import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { useAccount } from '@plebbit/plebbit-react-hooks';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Link, useNavigate } from 'react-router-dom';
 import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled';
 import BoardAvatar from '../BoardAvatar';
-import packageJson from '../../../package.json'
 import BoardSubscription from '../BoardSubscription';
+import packageJson from '../../../package.json'
+import { Tooltip } from 'react-tooltip';
 const {version} = packageJson
 
 
@@ -40,6 +41,7 @@ const Home = () => {
         <title>plebchan</title>
       </Helmet>
       <Container>
+        <Tooltip id="tooltip" className="tooltip" />
         <Header>
           <Logo>
             <Link to="/">