implement PostOnHover component

src/components/PostOnHover.jsx

@@ -0,0 +1,185 @@
+import React, { Fragment } from "react";
+import { Link } from "react-router-dom";
+import { useAccount, useComment } from "@plebbit/plebbit-react-hooks";
+import getDate from "../utils/getDate";
+import getCommentMediaInfo from "../utils/getCommentMediaInfo";
+import findShortParentCid from "../utils/findShortParentCid";
+import Post from "./Post";
+import EditLabel from "./EditLabel";
+import useStateString from "../hooks/useStateString";
+import { BoardForm, Container } from "./styled/views/Board.styled";
+import useGeneralStore from "../hooks/stores/useGeneralStore";
+
+const PostOnHover = ({ cid, feed }) => {
+  const selectedStyle = useGeneralStore(state => state.selectedStyle);
+  const account = useAccount();
+  const reply = useComment({commentCid: cid});
+  const replyMediaInfo = getCommentMediaInfo(reply);
+  const fallbackImgUrl = "assets/filedeleted-res.gif";
+  const selectedFeed = feed;
+  const thread = useComment({commentCid: reply.parentCid});
+  const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
+  const stateString = useStateString(reply);
+
+  return (
+    <Container selectedStyle={selectedStyle} style={{margin: '0', padding: '0',
+      whiteSpace: 'nowrap', overflow: 'visible'}}>
+      <BoardForm selectedStyle={selectedStyle} style={{margin: '0', padding: '0'}}>
+        <div className="board" style={{margin: '0', padding: '0'}}>
+          <div className="thread" style={{margin: '0', padding: '0'}}>
+            {reply.state === 'succeeded' ? (
+              <div className="reply-container">
+                <div className="post-reply post-reply-desktop">
+                  <div className="post-info">
+                    <span className="nameblock">
+                      {reply.author?.displayName
+                        ? reply.author?.displayName.length > 20
+                        ? <Fragment >
+                            <span className="name"
+                            data-tooltip-id="tooltip"
+                            data-tooltip-content={reply.author?.displayName}
+                            data-tooltip-place="top">
+                              {reply.author?.displayName.slice(0, 20) + " (...)"}
+                            </span>
+                          </Fragment>
+                          : <span className="name">
+                            {reply.author?.displayName}</span>
+                        : <span className="name">
+                          Anonymous</span>}
+                      &nbsp;
+                      <span className="poster-address address-desktop"
+                        id="reply-button" style={{cursor: "pointer"}}
+                      >
+                        (u/
+                          {reply.author?.shortAddress ?
+                            (
+                              <span >
+                                {reply.author?.shortAddress}
+                              </span>
+                            ) : (
+                              <span >
+                                {account?.author?.shortAddress}
+                              </span>
+                            )
+                          }
+                        )
+                      </span>
+                    </span>
+                    &nbsp;
+                    <span className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
+                    &nbsp;
+                    <span className="post-number post-number-desktop">
+                      <span >c/</span>
+                      {reply.shortCid ? (
+                        <Link to={() => {}} id="reply-button" 
+                        title="Reply to this post">{reply.shortCid}</Link>
+                      ) : (
+                        <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
+                      )}
+                    </span>&nbsp;
+                    <div id="backlink-id" className="backlink">
+                      {reply.replies?.pages?.topAll.comments
+                        .sort((a, b) => a.timestamp - b.timestamp)
+                        .map((reply, index) => (
+                          <div key={`div-${index}`} style={{display: 'inline-block'}}>
+                          <Link key={`link-${index}`} to={() => {}} 
+                            className="quote-link">
+                            c/{reply.shortCid}</Link>
+                            &nbsp;
+                          </div>
+                        ))
+                      }
+                    </div>
+                  </div>
+                  {replyMediaInfo?.url ? (
+                    <div className="file" 
+                    style={{marginBottom: "5px"}}>
+                      <div className="reply-file-text">
+                        Link:&nbsp;
+                        <a href={replyMediaInfo.url} target="_blank"
+                        rel="noopener noreferrer">{
+                        replyMediaInfo?.url.length > 30 ?
+                        replyMediaInfo?.url.slice(0, 30) + "(...)" :
+                        replyMediaInfo?.url
+                        }</a>&nbsp;({replyMediaInfo?.type})
+                      </div>
+                      {replyMediaInfo?.type === "webpage" ? (
+                        <div className="img-container">
+                          <span className="file-thumb-reply">
+                            {reply.thumbnailUrl ? (
+                              <img 
+                              src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
+                              style={{cursor: "pointer"}}
+                              onError={(e) => e.target.src = fallbackImgUrl} />
+                            ) : null}
+                          </span>
+                        </div>
+                      ) : null}
+                      {replyMediaInfo?.type === "image" ? (
+                        <div className="img-container">
+                          <span className="file-thumb-reply">
+                            <img 
+                            src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                            style={{cursor: "pointer"}}
+                            onError={(e) => e.target.src = fallbackImgUrl} />
+                          </span>
+                        </div>
+                      ) : null}
+                      {replyMediaInfo?.type === "video" ? (
+                        <span className="file-thumb-reply">
+                          <video controls
+                          
+                          src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                          onError={(e) => e.target.src = fallbackImgUrl} />
+                        </span>
+                      ) : null}
+                      {replyMediaInfo?.type === "audio" ? (
+                        <span className="file-thumb-reply">
+                          <audio controls 
+                          
+                          src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                          onError={(e) => e.target.src = fallbackImgUrl} />
+                        </span>
+                      ) : null}
+                    </div>
+                  ) : null}
+                  {reply.content ? (
+                    reply.content?.length > 500 ?
+                    <Fragment >
+                      <blockquote comment={reply} className="post-message">
+                        <Link to={() => {}} className="quotelink">
+                            {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
+                        </Link>
+                        <Post content={reply.content?.slice(0, 500)} />
+                        <span className="ttl"> (...)
+                        <br /> <EditLabel 
+                        commentCid={reply.cid}
+                        className="ttl"/><br />
+                        Comment too long. Click the link to view.</span>
+                      </blockquote>
+                    </Fragment>
+                  : <blockquote className="post-message">
+                      <Link to={() => {}} className="quotelink">
+                          {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
+                      </Link>
+                      <Post content={reply.content} comment={reply} />
+                      <EditLabel 
+                        commentCid={reply.cid}
+                        className="ttl"/>
+                    </blockquote>)
+                  : null}
+                </div>
+              </div>
+              ) : (
+              <div className="reply-container">
+                <span className="ellipsis">{stateString}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </BoardForm>
+    </Container>
+  );
+}
+
+export default PostOnHover;

src/components/views/All.jsx

@@ -1,4 +1,5 @@
-import React, { Fragment, useEffect, useMemo, useState, useRef } from 'react';
+import React, { Fragment, useEffect, useLayoutEffect, useMemo, useState, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
@@ -13,6 +14,7 @@ import ImageBanner from '../ImageBanner';
 import OfflineIndicator from '../OfflineIndicator';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
+import PostOnHover from '../PostOnHover';
 import ReplyModal from '../modals/ReplyModal';
 import SettingsModal from '../modals/SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
@@ -47,6 +49,8 @@ const All = () => {
 
   const threadMenuRefs = useRef({});
   const replyMenuRefs = useRef({});
+  const threadBacklinkRefs = useRef({});
+  const postOnHoverRef = useRef(null);
 
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const [prevScrollPos, setPrevScrollPos] = useState(0);
@@ -54,6 +58,9 @@ const All = () => {
   const [rotatedStates, setRotatedStates] = useState({});
   const [errorMessage, setErrorMessage] = useState(null);
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  const [outOfViewCid, setOutOfViewCid] = useState(null);
+  const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
+  const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
 
   useError(errorMessage, [errorMessage]);
 
@@ -189,6 +196,14 @@ const All = () => {
   };
 
 
+  useLayoutEffect(() => {
+    if (postOnHoverRef.current) {
+        const rect = postOnHoverRef.current.getBoundingClientRect();
+        setPostOnHoverHeight(rect.height);
+    }
+  }, [outOfViewCid]);
+
+
   return (
     <>
       <Helmet>
@@ -517,12 +532,28 @@ const All = () => {
                               {thread.replies?.pages?.topAll.comments
                                 .sort((a, b) => a.timestamp - b.timestamp)
                                 .map((reply, index) => (
-                                  <div key={`div-${index}`} style={{display: 'inline-block'}}>
+                                  <div key={`div-${index}`} style={{display: 'inline-block'}} 
+                                  ref={el => {
+                                    threadBacklinkRefs.current[reply.cid] = el;
+                                  }}>
                                   <Link key={`ql-${index}`}
                                   to={() => {}} className="quote-link" 
                                   onClick={(event) => handleQuoteClick(reply, null, event)}
-                                  onMouseOver={(event) => handleQuoteHover(reply, null, event)}
+                                  onMouseOver={(event) => {
-                                  onMouseLeave={removeHighlight}>
+                                    event.stopPropagation();
+                                    handleQuoteHover(reply, null, () => {
+                                      setOutOfViewCid(reply.cid);
+                                      const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
+                                      setOutOfViewPosition({
+                                        top: rect.top + window.scrollY - rect.height / 2,
+                                        left: rect.left + rect.width + 5,
+                                      });
+                                    });
+                                  }}
+                                  onMouseLeave={() => {
+                                    removeHighlight();
+                                    setOutOfViewCid(null);
+                                  }}>
                                     c/{reply.shortCid}</Link>
                                     &nbsp;
                                   </div>
@@ -702,16 +733,32 @@ const All = () => {
                                     ) : null}
                                 </ul>
                               </div>
-                              <div id="backlink-id" className="backlink">
+                              <div key={`bi-${index}`} id="backlink-id" className="backlink">
                                 {reply.replies?.pages?.topAll.comments
                                   .sort((a, b) => a.timestamp - b.timestamp)
                                   .map((reply, index) => (
-                                    <div key={`div-${index}`} style={{display: 'inline-block'}}>
+                                    <div key={`div-${index}`} style={{display: 'inline-block'}} 
-                                    <Link to={() => {}} key={`ql-${index}`}
+                                    ref={el => {
-                                      className="quote-link" 
+                                      threadBacklinkRefs.current[reply.cid] = el;
-                                      onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
+                                    }}>
-                                      onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
+                                    <Link key={`ql-${index}`}
-                                      onMouseLeave={removeHighlight}>
+                                    to={() => {}} className="quote-link" 
+                                    onClick={(event) => handleQuoteClick(reply, null, event)}
+                                    onMouseOver={(event) => {
+                                      event.stopPropagation();
+                                      handleQuoteHover(reply, null, () => {
+                                        setOutOfViewCid(reply.cid);
+                                        const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
+                                        setOutOfViewPosition({
+                                          top: rect.top + window.scrollY - rect.height / 2,
+                                          left: rect.left + rect.width + 5,
+                                        });
+                                      });
+                                    }}
+                                    onMouseLeave={() => {
+                                      removeHighlight();
+                                      setOutOfViewCid(null);
+                                    }}>
                                       c/{reply.shortCid}</Link>
                                       &nbsp;
                                     </div>
@@ -1159,6 +1206,23 @@ const All = () => {
               />
             )}
           </div>
+          {createPortal(
+            <div
+            ref={postOnHoverRef}
+              style={{
+                display: outOfViewCid ? "block" : "none",
+                position: "absolute",
+                top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
+                left: outOfViewPosition.left, 
+              }}
+              >
+                <PostOnHover
+                  cid={outOfViewCid}
+                  feed={feed}
+                />
+              </div>
+            , document.body
+          )}
         </BoardForm>
         <Footer selectedStyle={selectedStyle}>
           <Break id="break" selectedStyle={selectedStyle} style={{

src/components/views/Board.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
@@ -19,6 +19,7 @@ import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
+import PostOnHover from '../PostOnHover';
 import StateLabel from '../StateLabel';
 import ReplyModal from '../modals/ReplyModal';
 import SettingsModal from '../modals/SettingsModal';
@@ -74,8 +75,9 @@ const Board = () => {
   const linkRef = useRef();
   const threadMenuRefs = useRef({});
   const replyMenuRefs = useRef({});
-  const postMenuRef = useRef(null);
   const postMenuCatalogRef = useRef(null);
+  const threadBacklinkRefs = useRef({});
+  const postOnHoverRef = useRef(null);
 
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
   const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
@@ -97,6 +99,8 @@ const Board = () => {
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
   const [outOfViewCid, setOutOfViewCid] = useState(null);
+  const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
+  const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
 
   const [errorMessage, setErrorMessage] = useState(null);
   const [successMessage, setSuccessMessage] = useState(null);
@@ -122,10 +126,10 @@ const Board = () => {
   };
 
   const handleOutsideClick = useCallback((e) => {
-    if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) {
+    if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) {
       setOpenMenuCid(null);
     }
-  }, [openMenuCid, postMenuRef, postMenuCatalogRef]);
+  }, [openMenuCid, postMenuCatalogRef]);
   
 
   useEffect(() => {
@@ -524,6 +528,13 @@ const Board = () => {
     }
   };
 
+  useLayoutEffect(() => {
+    if (postOnHoverRef.current) {
+        const rect = postOnHoverRef.current.getBoundingClientRect();
+        setPostOnHoverHeight(rect.height);
+    }
+  }, [outOfViewCid]);
+
   
   return (
     <>
@@ -872,8 +883,7 @@ const Board = () => {
                               key={`pmb-${index}`} 
                               title="Post menu"
                               ref={el => { 
-                                threadMenuRefs.current[thread.cid] = el; 
+                                threadMenuRefs.current[thread.cid] = el;
-                                postMenuRef.current = el; 
                               }}
                               className='post-menu-button' 
                               rotated={openMenuCid === thread.cid}
@@ -968,17 +978,31 @@ const Board = () => {
                               {thread.replies?.pages?.topAll.comments
                                 .sort((a, b) => a.timestamp - b.timestamp)
                                 .map((reply, index) => (
-                                  <div key={`div-${index}`} style={{display: 'inline-block'}}>
+                                  <div key={`div-${index}`} style={{display: 'inline-block'}} 
-                                  <Link key={`ql-${index}`}
+                                  ref={el => {
-                                  to={() => {}} className="quote-link" 
+                                    threadBacklinkRefs.current[reply.cid] = el;
-                                  onClick={(event) => handleQuoteClick(reply, null, event)}
-                                  onMouseOver={() => handleQuoteHover(reply, null, (cid) => setOutOfViewCid(cid))}
-                                  onMouseLeave={() => {
-                                    removeHighlight();
-                                    setOutOfViewCid(null);
                                   }}>
-                                    c/{reply.shortCid}</Link>
+                                    <Link key={`ql-${index}`}
-                                    &nbsp;
+                                    to={() => {}}
+                                    className="quote-link" 
+                                    onClick={(event) => handleQuoteClick(reply, null, event)}
+                                    onMouseOver={(event) => {
+                                      event.stopPropagation();
+                                      handleQuoteHover(reply, null, () => {
+                                        setOutOfViewCid(reply.cid);
+                                        const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
+                                        setOutOfViewPosition({
+                                          top: rect.top + window.scrollY - rect.height / 2,
+                                          left: rect.left + rect.width + 5,
+                                        });
+                                      });
+                                    }}                                
+                                    onMouseLeave={() => {
+                                      removeHighlight();
+                                      setOutOfViewCid(null);
+                                    }}>
+                                      c/{reply.shortCid}</Link>
+                                      &nbsp;
                                   </div>
                                 ))
                               }
@@ -1098,7 +1122,6 @@ const Board = () => {
                               title="Post menu"
                               ref={el => { 
                                 replyMenuRefs.current[reply.cid] = el; 
-                                postMenuRef.current = el; 
                               }}
                               className='post-menu-button' 
                               rotated={openMenuCid === reply.cid}
@@ -1189,16 +1212,29 @@ const Board = () => {
                               </div>
                               </PostMenuCatalog>, document.body
                             )}
-                              <div id="backlink-id" className="backlink">
+                              <div key={`bi-${index}`} id="backlink-id" className="backlink">
                                 {reply.replies?.pages?.topAll.comments
                                   .sort((a, b) => a.timestamp - b.timestamp)
                                   .map((reply, index) => (
-                                    <div key={`div-${index}`} style={{display: 'inline-block'}}>
+                                    <div key={`div-${index}`} style={{display: 'inline-block'}} 
-                                    <Link to={() => {}} key={`ql-${index}`}
+                                    ref={el => {
-                                      className="quote-link" 
+                                      threadBacklinkRefs.current[reply.cid] = el;
-                                      onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
+                                    }}>
-                                      onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))}
+                                    <Link key={`ql-${index}`}
-                                      onMouseLeave={() => {
+                                    to={() => {}} className="quote-link" 
+                                    onClick={(event) => handleQuoteClick(reply, null, event)}
+                                    onMouseOver={(event) => {
+                                      event.stopPropagation();
+                                      handleQuoteHover(reply, null, () => {
+                                        setOutOfViewCid(reply.cid);
+                                        const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
+                                        setOutOfViewPosition({
+                                          top: rect.top + window.scrollY - rect.height / 2,
+                                          left: rect.left + rect.width + 5,
+                                        });
+                                      });
+                                    }}
+                                    onMouseLeave={() => {
                                       removeHighlight();
                                       setOutOfViewCid(null);
                                     }}>
@@ -1672,6 +1708,23 @@ const Board = () => {
               ) : (<PostLoader />)
             )}
           </div>
+          {createPortal(
+            <div
+            ref={postOnHoverRef}
+              style={{
+                display: outOfViewCid ? "block" : "none",
+                position: "absolute",
+                top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
+                left: outOfViewPosition.left, 
+              }}
+              >
+                <PostOnHover
+                  cid={outOfViewCid}
+                  feed={feed}
+                />
+              </div>
+            , document.body
+          )}
         </BoardForm>
         <Footer selectedStyle={selectedStyle}>
           <Break id="break" selectedStyle={selectedStyle} style={{

src/components/views/Subscriptions.jsx

@@ -1,4 +1,5 @@
-import React, { Fragment, useEffect, useMemo, useState, useRef } from 'react';
+import React, { Fragment, useEffect, useLayoutEffect, useMemo, useState, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
@@ -13,6 +14,7 @@ import ImageBanner from '../ImageBanner';
 import OfflineIndicator from '../OfflineIndicator';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
+import PostOnHover from '../PostOnHover';
 import ReplyModal from '../modals/ReplyModal';
 import SettingsModal from '../modals/SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
@@ -47,12 +49,17 @@ const Subscriptions = () => {
 
   const threadMenuRefs = useRef({});
   const replyMenuRefs = useRef({});
+  const threadBacklinkRefs = useRef({});
+  const postOnHoverRef = useRef(null);
 
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const [rotatedStates, setRotatedStates] = useState({});
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  const [outOfViewCid, setOutOfViewCid] = useState(null);
+  const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
+  const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
 
   const [errorMessage, setErrorMessage] = useState(null);
   useError(errorMessage, [errorMessage]);
@@ -187,6 +194,14 @@ const Subscriptions = () => {
     navigate(`/p/${selected}`);
   };
 
+  
+  useLayoutEffect(() => {
+    if (postOnHoverRef.current) {
+        const rect = postOnHoverRef.current.getBoundingClientRect();
+        setPostOnHoverHeight(rect.height);
+    }
+  }, [outOfViewCid]);
+  
 
   return (
     <>
@@ -522,12 +537,28 @@ const Subscriptions = () => {
                               {thread.replies?.pages?.topAll.comments
                                 .sort((a, b) => a.timestamp - b.timestamp)
                                 .map((reply, index) => (
-                                  <div key={`div-${index}`} style={{display: 'inline-block'}}>
+                                  <div key={`div-${index}`} style={{display: 'inline-block'}} 
+                                  ref={el => {
+                                    threadBacklinkRefs.current[reply.cid] = el;
+                                  }}>
                                   <Link key={`ql-${index}`}
                                   to={() => {}} className="quote-link" 
                                   onClick={(event) => handleQuoteClick(reply, null, event)}
-                                  onMouseOver={(event) => handleQuoteHover(reply, null, event)}
+                                  onMouseOver={(event) => {
-                                  onMouseLeave={removeHighlight}>
+                                    event.stopPropagation();
+                                    handleQuoteHover(reply, null, () => {
+                                      setOutOfViewCid(reply.cid);
+                                      const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
+                                      setOutOfViewPosition({
+                                        top: rect.top + window.scrollY - rect.height / 2,
+                                        left: rect.left + rect.width + 5,
+                                      });
+                                    });
+                                  }}
+                                  onMouseLeave={() => {
+                                    removeHighlight();
+                                    setOutOfViewCid(null);
+                                  }}>
                                     c/{reply.shortCid}</Link>
                                     &nbsp;
                                   </div>
@@ -707,16 +738,32 @@ const Subscriptions = () => {
                                     ) : null}
                                 </ul>
                               </div>
-                              <div id="backlink-id" className="backlink">
+                              <div key={`bi-${index}`} id="backlink-id" className="backlink">
                                 {reply.replies?.pages?.topAll.comments
                                   .sort((a, b) => a.timestamp - b.timestamp)
                                   .map((reply, index) => (
-                                    <div key={`div-${index}`} style={{display: 'inline-block'}}>
+                                    <div key={`div-${index}`} style={{display: 'inline-block'}} 
-                                    <Link to={() => {}} key={`ql-${index}`}
+                                    ref={el => {
-                                      className="quote-link" 
+                                      threadBacklinkRefs.current[reply.cid] = el;
-                                      onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
+                                    }}>
-                                      onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
+                                    <Link key={`ql-${index}`}
-                                      onMouseLeave={removeHighlight}>
+                                    to={() => {}} className="quote-link" 
+                                    onClick={(event) => handleQuoteClick(reply, null, event)}
+                                    onMouseOver={(event) => {
+                                      event.stopPropagation();
+                                      handleQuoteHover(reply, null, () => {
+                                        setOutOfViewCid(reply.cid);
+                                        const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
+                                        setOutOfViewPosition({
+                                          top: rect.top + window.scrollY - rect.height / 2,
+                                          left: rect.left + rect.width + 5,
+                                        });
+                                      });
+                                    }}
+                                    onMouseLeave={() => {
+                                      removeHighlight();
+                                      setOutOfViewCid(null);
+                                    }}>
                                       c/{reply.shortCid}</Link>
                                       &nbsp;
                                     </div>
@@ -1164,6 +1211,23 @@ const Subscriptions = () => {
               />
             )}
           </div>
+          {createPortal(
+            <div
+            ref={postOnHoverRef}
+              style={{
+                display: outOfViewCid ? "block" : "none",
+                position: "absolute",
+                top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
+                left: outOfViewPosition.left, 
+              }}
+              >
+                <PostOnHover
+                  cid={outOfViewCid}
+                  feed={feed}
+                />
+              </div>
+            , document.body
+          )}
         </BoardForm>
         <Footer selectedStyle={selectedStyle}>
           <Break id="break" selectedStyle={selectedStyle} style={{

src/components/views/Thread.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
@@ -18,6 +18,7 @@ import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
+import PostOnHover from '../PostOnHover';
 import StateLabel from '../StateLabel';
 import ReplyModal from '../modals/ReplyModal';
 import SettingsModal from '../modals/SettingsModal';
@@ -74,6 +75,8 @@ const Thread = () => {
   const replyMenuRefs = useRef({});
   const postMenuRef = useRef(null);
   const postMenuCatalogRef = useRef(null);
+  const threadBacklinkRefs = useRef({});
+  const postOnHoverRef = useRef(null);
 
   const [triggerPublishComment, setTriggerPublishComment] = useState(false);
   const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
@@ -91,6 +94,8 @@ const Thread = () => {
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
   const [outOfViewCid, setOutOfViewCid] = useState(null);
+  const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
+  const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
   
   useError(errorMessage, [errorMessage]);
   useSuccess(successMessage, [successMessage]);
@@ -474,6 +479,14 @@ const Thread = () => {
   };
 
 
+  useLayoutEffect(() => {
+    if (postOnHoverRef.current) {
+        const rect = postOnHoverRef.current.getBoundingClientRect();
+        setPostOnHoverHeight(rect.height);
+    }
+  }, [outOfViewCid]);
+
+
   return (
     <>
       <Helmet>
@@ -919,20 +932,33 @@ const Thread = () => {
                           </div>
                           </PostMenuCatalog>, document.body
                         )}
-                        <div id="backlink-id" className="backlink">
+                        <div key={`bi-${index}`} id="backlink-id" className="backlink">
-                          {comment?.replies?.pages?.topAll.comments
+                          {comment.replies?.pages?.topAll.comments
                             .sort((a, b) => a.timestamp - b.timestamp)
                             .map((reply, index) => (
-                              <div key={`div-${index}`} style={{display: 'inline-block'}}>
+                              <div key={`div-${index}`} style={{display: 'inline-block'}} 
-                              <span style={{cursor: 'pointer'}} key={`ql-${index}`}
+                              ref={el => {
-                                className="quote-link" 
+                                threadBacklinkRefs.current[reply.cid] = el;
-                                onClick={(event) => handleQuoteClick(reply, null, event)}
+                              }}>
-                                onMouseOver={() => handleQuoteHover(reply, null, (cid) => setOutOfViewCid(cid))}
+                              <Link key={`ql-${index}`}
-                                onMouseLeave={() => {
+                              to={() => {}} className="quote-link" 
-                                  removeHighlight();
+                              onClick={(event) => handleQuoteClick(reply, null, event)}
-                                  setOutOfViewCid(null);
+                              onMouseOver={(event) => {
-                                }}>
+                                event.stopPropagation();
-                                c/{reply.shortCid}</span>
+                                handleQuoteHover(reply, null, () => {
+                                  setOutOfViewCid(reply.cid);
+                                  const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
+                                  setOutOfViewPosition({
+                                    top: rect.top + window.scrollY - rect.height / 2,
+                                    left: rect.left + rect.width + 5,
+                                  });
+                                });
+                              }}
+                              onMouseLeave={() => {
+                                removeHighlight();
+                                setOutOfViewCid(null);
+                              }}>
+                                c/{reply.shortCid}</Link>
                                 &nbsp;
                               </div>
                             ))
@@ -1107,20 +1133,33 @@ const Thread = () => {
                               </div>
                               </PostMenuCatalog>, document.body
                             )}
-                            <div id="backlink-id" className="backlink">
+                            <div key={`bi-${index}`} id="backlink-id" className="backlink">
                               {reply.replies?.pages?.topAll.comments
                                 .sort((a, b) => a.timestamp - b.timestamp)
                                 .map((reply, index) => (
-                                  <div key={`div-${index}`} style={{display: 'inline-block'}}>
+                                  <div key={`div-${index}`} style={{display: 'inline-block'}} 
-                                  <span style={{cursor: 'pointer'}} key={`ql-${index}`}
+                                  ref={el => {
-                                    className="quote-link" 
+                                    threadBacklinkRefs.current[reply.cid] = el;
-                                    onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
+                                  }}>
-                                    onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))}
+                                  <Link key={`ql-${index}`}
-                                    onMouseLeave={() => {
+                                  to={() => {}} className="quote-link" 
-                                      removeHighlight();
+                                  onClick={(event) => handleQuoteClick(reply, null, event)}
-                                      setOutOfViewCid(null);
+                                  onMouseOver={(event) => {
-                                    }}>
+                                    event.stopPropagation();
-                                    c/{reply.shortCid}</span>
+                                    handleQuoteHover(reply, null, () => {
+                                      setOutOfViewCid(reply.cid);
+                                      const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
+                                      setOutOfViewPosition({
+                                        top: rect.top + window.scrollY - rect.height / 2,
+                                        left: rect.left + rect.width + 5,
+                                      });
+                                    });
+                                  }}
+                                  onMouseLeave={() => {
+                                    removeHighlight();
+                                    setOutOfViewCid(null);
+                                  }}>
+                                    c/{reply.shortCid}</Link>
                                     &nbsp;
                                   </div>
                                 ))
@@ -1585,6 +1624,23 @@ const Thread = () => {
                 ) : (null)}
             </>
           )) : null}
+          {createPortal(
+            <div
+            ref={postOnHoverRef}
+              style={{
+                display: outOfViewCid ? "block" : "none",
+                position: "absolute",
+                top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
+                left: outOfViewPosition.left, 
+              }}
+              >
+                <PostOnHover
+                  cid={outOfViewCid}
+                  feed={comment}
+                />
+              </div>
+            , document.body
+          )}
         </BoardForm>
         <Footer selectedStyle={selectedStyle}>
           <Break id="break" selectedStyle={selectedStyle} style={{

src/utils/handleQuoteHover.js

@@ -23,7 +23,6 @@ function handleQuoteHover(reply, parentCid, onElementOutOfView) {
     };
 
     if (isInViewport(targetElement)) {
-      onElementOutOfView(cid);
       const highlightedElements = document.querySelectorAll('.highlighted');
 
       highlightedElements.forEach(el => {
@@ -33,9 +32,11 @@ function handleQuoteHover(reply, parentCid, onElementOutOfView) {
       if (!targetElement.classList.contains('op-mobile') && !targetElement.classList.contains('op-desktop')) {
         targetElement.classList.add('highlighted');
       }
+    } else {
+      onElementOutOfView();
     }
   } else {
-    return;
+    onElementOutOfView();
   }
 };