fix: 悬停始终弹出描述tooltip，趋势页新增tooltip

src/components/FloatingTooltip.tsx

@@ -0,0 +1,80 @@
+import React, { useLayoutEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+
+interface FloatingTooltipProps {
+  content: React.ReactNode;
+  visible: boolean;
+  triggerRef: React.RefObject<HTMLElement | null>;
+  onMouseLeave: () => void;
+  onMouseEnter?: () => void;
+}
+
+export const FloatingTooltip: React.FC<FloatingTooltipProps> = ({
+  content,
+  visible,
+  triggerRef,
+  onMouseLeave,
+  onMouseEnter,
+}) => {
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const rafRef = useRef<number>(0);
+
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !tooltipRef.current || !visible) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipEl = tooltipRef.current;
+
+    tooltipEl.style.maxHeight = '280px';
+    const tooltipHeight = tooltipEl.offsetHeight;
+    const tooltipWidth = triggerRect.width;
+
+    const top = triggerRect.top - tooltipHeight - 8;
+    const left = triggerRect.left;
+
+    if (top < 8) {
+      tooltipEl.style.top = `${triggerRect.bottom + 8}px`;
+      tooltipEl.style.bottom = 'auto';
+    } else {
+      tooltipEl.style.top = `${top}px`;
+      tooltipEl.style.bottom = 'auto';
+    }
+
+    tooltipEl.style.left = `${left}px`;
+    tooltipEl.style.width = `${tooltipWidth}px`;
+  }, [triggerRef, visible]);
+
+  useLayoutEffect(() => {
+    if (visible) {
+      updatePosition();
+      const handleResize = () => {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(updatePosition);
+      };
+      window.addEventListener('resize', handleResize);
+      window.addEventListener('scroll', handleResize, true);
+      return () => {
+        cancelAnimationFrame(rafRef.current);
+        window.removeEventListener('resize', handleResize);
+        window.removeEventListener('scroll', handleResize, true);
+      };
+    }
+  }, [visible, updatePosition]);
+
+  if (!visible) return null;
+
+  return createPortal(
+    <div
+      ref={tooltipRef}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      className="fixed z-[9999] p-4 bg-white dark:bg-surface-3 text-gray-900 dark:text-text-primary text-[13px] leading-[1.625] rounded-xl shadow-dialog border border-gray-200/80 dark:border-white/[0.04] animate-fade-in max-h-[280px] overflow-y-auto scrollbar-auto"
+      style={{ pointerEvents: 'auto' }}
+    >
+      <div className="whitespace-pre-wrap break-words pr-2">
+        {content}
+      </div>
+    </div>,
+    document.body
+  );
+};

src/components/RepositoryCard.tsx

@@ -10,6 +10,7 @@ import { GitHubApiService } from '../services/githubApi';
 import { formatDistanceToNow } from 'date-fns';
 import { RepositoryEditModal } from './RepositoryEditModal';
 import { ReadmeModal } from './ReadmeModal';
+import { FloatingTooltip } from './FloatingTooltip';
 import { shallow } from 'zustand/shallow';
 import { useDialog } from '../hooks/useDialog';
 
@@ -135,13 +136,12 @@ const RepositoryCardComponent: React.FC<RepositoryCardProps> = ({
   const [editModalOpen, setEditModalOpen] = useState(false);
   const [readmeModalOpen, setReadmeModalOpen] = useState(false);
   const [showTooltip, setShowTooltip] = useState(false);
-  const [isTextTruncated, setIsTextTruncated] = useState(false);
+  const descTriggerRef = useRef<HTMLDivElement>(null);
+  const tooltipHideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [unstarring, setUnstarring] = useState(false);
   const [showDragHint, setShowDragHint] = useState(false);
   const dragHintTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const descriptionRef = useRef<HTMLParagraphElement>(null);
-
   // 高亮搜索关键词的工具函数 - 使用缓存优化
   const highlightSearchTerm = useCallback((text: string, searchTerm: string): React.ReactNode => {
     if (!searchTerm.trim() || !text) return text;
@@ -176,28 +176,17 @@ const RepositoryCardComponent: React.FC<RepositoryCardProps> = ({
     return result;
   }, []);
 
-  // Check if text is actually truncated by comparing scroll height with client height
+  // Cleanup timeouts on unmount
   useEffect(() => {
-    const checkTruncation = () => {
-      if (descriptionRef.current) {
-        const element = descriptionRef.current;
-        const isTruncated = element.scrollHeight > element.clientHeight;
-        setIsTextTruncated(isTruncated);
-      }
-    };
-
-    // Check truncation after component mounts and when content changes
-    checkTruncation();
-
-    // Also check on window resize
-    window.addEventListener('resize', checkTruncation);
     return () => {
-      window.removeEventListener('resize', checkTruncation);
       if (dragHintTimeoutRef.current) {
         clearTimeout(dragHintTimeoutRef.current);
       }
+      if (tooltipHideTimerRef.current) {
+        clearTimeout(tooltipHideTimerRef.current);
+      }
     };
-  }, [repository, showAISummary]);
+  }, []);
 
   const formatNumber = (num: number) => {
     if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
@@ -878,30 +867,30 @@ const RepositoryCardComponent: React.FC<RepositoryCardProps> = ({
         </div>
       </div>
 
-      {/* Description with Tooltip - Enhanced for Light Mode */}
+      {/* Description with Tooltip */}
       <div className="mb-4 flex-1">
         <div
+          ref={descTriggerRef}
           className="relative group"
-          onMouseEnter={() => isTextTruncated && setShowTooltip(true)}
-          onMouseLeave={() => setShowTooltip(false)}
+          onMouseEnter={() => { clearTimeout(tooltipHideTimerRef.current); setShowTooltip(true); }}
+          onMouseLeave={() => { tooltipHideTimerRef.current = setTimeout(() => setShowTooltip(false), 150); }}
+          onFocus={() => { clearTimeout(tooltipHideTimerRef.current); setShowTooltip(true); }}
+          onBlur={() => { tooltipHideTimerRef.current = setTimeout(() => setShowTooltip(false), 150); }}
+          onTouchStart={() => setShowTooltip((v) => !v)}
+          tabIndex={0}
         >
           <p
-            ref={descriptionRef}
             className="text-gray-800 dark:text-text-secondary text-[13px] leading-[1.625] line-clamp-3 mb-2 transition-colors duration-200 hover:text-gray-900 dark:hover:text-text-primary rounded px-1 -mx-1 hover:bg-gray-50/50 dark:hover:bg-white/[0.02]"
           >
             {highlightSearchTerm(displayContent.content, searchQuery)}
           </p>
-
-          {/* Enhanced Tooltip - Optimized for Light Mode Readability */}
-          {isTextTruncated && showTooltip && (
-            <div className="absolute z-50 bottom-full left-0 right-0 mb-2 p-4 bg-white dark:bg-surface-3 text-gray-900 dark:text-text-primary text-[13px] leading-[1.625] rounded-xl shadow-dialog border border-gray-200/80 dark:border-white/[0.04] animate-fade-in max-h-[280px] overflow-y-auto scrollbar-auto">
-              <div className="whitespace-pre-wrap break-words pr-2">
-                {highlightSearchTerm(displayContent.content, searchQuery)}
-              </div>
-              {/* Arrow with Light Mode Optimization */}
-              <div className="absolute top-full left-4 w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-t-[6px] border-t-white dark:border-t-surface-3 drop-shadow-sm"></div>
-            </div>
-          )}
+          <FloatingTooltip
+            content={highlightSearchTerm(displayContent.content, searchQuery)}
+            visible={showTooltip}
+            triggerRef={descTriggerRef}
+            onMouseEnter={() => clearTimeout(tooltipHideTimerRef.current)}
+            onMouseLeave={() => { tooltipHideTimerRef.current = setTimeout(() => setShowTooltip(false), 150); }}
+          />
         </div>
 
         {/* 方案一：同时显示多个状态标签 */}

src/components/SubscriptionRepoCard.tsx

@@ -7,6 +7,7 @@ import { forceSyncToBackend } from '../services/autoSync';
 import { GitHubApiService } from '../services/githubApi';
 import { ReadmeModal } from './ReadmeModal';
 import { Modal } from './Modal';
+import { FloatingTooltip } from './FloatingTooltip';
 import { useDialog } from '../hooks/useDialog';
 
 interface SubscriptionRepoCardProps {
@@ -39,6 +40,20 @@ export const SubscriptionRepoCard: React.FC<SubscriptionRepoCardProps> = ({ repo
   // 取消Star确认对话框状态
   const [unstarConfirmOpen, setUnstarConfirmOpen] = useState(false);
   const [pendingUnstarAction, setPendingUnstarAction] = useState<(() => void) | null>(null);
+  const [descTooltip, setDescTooltip] = useState(false);
+  const [aiTooltip, setAiTooltip] = useState(false);
+  const descTriggerRef = useRef<HTMLDivElement>(null);
+  const aiTriggerRef = useRef<HTMLDivElement>(null);
+  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const scheduleHide = useCallback((setter: (v: boolean) => void) => {
+    if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    hideTimerRef.current = setTimeout(() => setter(false), 150);
+  }, []);
+
+  const cancelHide = useCallback(() => {
+    if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+  }, []);
 
   const abortControllerRef = useRef<AbortController | null>(null);
 
@@ -403,18 +418,52 @@ export const SubscriptionRepoCard: React.FC<SubscriptionRepoCardProps> = ({ repo
 
           {/* Description */}
           {repo.description && (
-            <p className="text-sm text-gray-700 dark:text-text-tertiary mb-3 line-clamp-2">
-              {repo.description}
-            </p>
+            <div
+              ref={descTriggerRef}
+              className="relative mb-3"
+              onMouseEnter={() => { cancelHide(); setDescTooltip(true); }}
+              onMouseLeave={() => scheduleHide(setDescTooltip)}
+              onFocus={() => { cancelHide(); setDescTooltip(true); }}
+              onBlur={() => scheduleHide(setDescTooltip)}
+              onTouchStart={() => setDescTooltip((v) => !v)}
+              tabIndex={0}
+            >
+              <p className="text-sm text-gray-700 dark:text-text-tertiary line-clamp-2 rounded px-1 -mx-1 hover:bg-gray-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200">
+                {repo.description}
+              </p>
+              <FloatingTooltip
+                content={repo.description}
+                visible={descTooltip}
+                triggerRef={descTriggerRef}
+                onMouseEnter={() => { cancelHide(); }}
+                onMouseLeave={() => scheduleHide(setDescTooltip)}
+              />
+            </div>
           )}
 
           {/* AI Summary */}
           {repo.ai_summary && (
-            <div className="flex items-start gap-1.5 mb-3">
+            <div
+              ref={aiTriggerRef}
+              className="relative flex items-start gap-1.5 mb-3"
+              onMouseEnter={() => { cancelHide(); setAiTooltip(true); }}
+              onMouseLeave={() => scheduleHide(setAiTooltip)}
+              onFocus={() => { cancelHide(); setAiTooltip(true); }}
+              onBlur={() => scheduleHide(setAiTooltip)}
+              onTouchStart={() => setAiTooltip((v) => !v)}
+              tabIndex={0}
+            >
               <Bot className="w-4 h-4 text-gray-700 dark:text-text-secondary flex-shrink-0 mt-0.5" />
-              <p className="text-sm text-gray-700 dark:text-text-secondary line-clamp-2">
+              <p className="text-sm text-gray-700 dark:text-text-secondary line-clamp-2 rounded px-1 -mx-1 hover:bg-gray-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200">
                 {repo.ai_summary}
               </p>
+              <FloatingTooltip
+                content={repo.ai_summary}
+                visible={aiTooltip}
+                triggerRef={aiTriggerRef}
+                onMouseEnter={() => { cancelHide(); }}
+                onMouseLeave={() => scheduleHide(setAiTooltip)}
+              />
             </div>
           )}