Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AmintaCCCP merged 4 commits into from
May 29, 2026
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
64f9c78
fix: always show hover tooltip for descriptions, add tooltip to trend…
AmintaCCCP May 29, 2026
a1bacb8
fix: add keyboard/touch accessibility to description tooltips
AmintaCCCP May 29, 2026
24d5375
fix: use portal-based tooltip to avoid overflow clipping
AmintaCCCP May 29, 2026
6d9ad1f
fix: hover-intent tooltip, useLayoutEffect, rAF throttling
AmintaCCCP May 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 78 additions & 0 deletions src/components/FloatingTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import React, { useEffect, useRef, useCallback } from 'react';
import { createPortal } from 'react-dom';

interface FloatingTooltipProps {
content: React.ReactNode;
visible: boolean;
triggerRef: React.RefObject<HTMLElement | null>;
onMouseLeave: () => void;
}

export const FloatingTooltip: React.FC<FloatingTooltipProps> = ({
content,
visible,
triggerRef,
onMouseLeave,
}) => {
const tooltipRef = useRef<HTMLDivElement>(null);

const updatePosition = useCallback(() => {
if (!triggerRef.current || !tooltipRef.current || !visible) return;

const triggerRect = triggerRef.current.getBoundingClientRect();
const tooltipEl = tooltipRef.current;

// Reset height to get natural measurement
tooltipEl.style.maxHeight = '280px';
const tooltipHeight = tooltipEl.offsetHeight;
const tooltipWidth = triggerRect.width;

// Position above the trigger
const top = triggerRect.top - tooltipHeight - 8;
const left = triggerRect.left;

// If tooltip would go above viewport, flip it below
if (top < 8) {
tooltipEl.style.top = `${triggerRect.bottom + 8}px`;
tooltipEl.style.bottom = 'auto';
// Flip arrow direction
tooltipEl.dataset.flipped = 'true';
} else {
tooltipEl.style.top = `${top}px`;
tooltipEl.style.bottom = 'auto';
tooltipEl.dataset.flipped = 'false';
}

tooltipEl.style.left = `${left}px`;
tooltipEl.style.width = `${tooltipWidth}px`;
}, [triggerRef, visible]);

useEffect(() => {
if (visible) {
updatePosition();
const handleResize = () => updatePosition();
window.addEventListener('resize', handleResize);
window.addEventListener('scroll', handleResize, true);
return () => {
window.removeEventListener('resize', handleResize);
window.removeEventListener('scroll', handleResize, true);
};
}
}, [visible, updatePosition]);

@coderabbitai coderabbitai Bot May 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | 🏗️ Heavy lift

Tooltip closes before the user can reach it, breaking scrollable long content. The tooltip is rendered 8px above the trigger and visibility is driven entirely by the trigger wrapper's onMouseLeave (see SubscriptionRepoCard lines 415/439 and RepositoryCard). When the cursor leaves the trigger to move onto the tooltip, onMouseLeave fires immediately and unmounts it — so a user can never hover the panel to scroll, which the PR test plan ("长文本 tooltip 内可滚动") requires. Adding onMouseEnter here alone won't fix it because the trigger has already toggled visible to false.

Recommend a hover-intent pattern: delay the hide, expose onMouseEnter on the tooltip to cancel the pending hide, and have consumers clear the timer on re-entry.

🛠️ Suggested pattern 
 interface FloatingTooltipProps {
   content: React.ReactNode;
   visible: boolean;
   triggerRef: React.RefObject<HTMLElement | null>;
+  onMouseEnter?: () => void;
   onMouseLeave: () => void;
 }
     <div
       ref={tooltipRef}
+      onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}

Consumers should hide on a short timeout (cleared by the tooltip's onMouseEnter) instead of synchronously on the wrapper's onMouseLeave.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/FloatingTooltip.tsx` around lines 50 - 61, The tooltip
immediately unmounts when the trigger's onMouseLeave fires, preventing
hovering/scrolling the tooltip; change FloatingTooltip to implement a
hover-intent hide delay: keep the existing visible/updatePosition logic but add
a hideTimeoutRef (or similar) that starts a short timeout on the trigger's
onMouseLeave instead of immediately setting visible=false, expose an
onMouseEnter handler on the tooltip DOM that clears that timeout (and also clear
the timeout on tooltip onMouseLeave to restart it), ensure cleanup of the
timeout in useEffect cleanup and when visible changes, and update consumers
(SubscriptionRepoCard/RepositoryCard) to stop toggling visibility synchronously
and rely on this delayed hide behavior.


if (!visible) return null;

return createPortal(
<div
ref={tooltipRef}
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
);
};
50 changes: 17 additions & 33 deletions src/components/RepositoryCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -135,13 +136,11 @@ 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 [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;
Expand Down Expand Up @@ -176,28 +175,14 @@ const RepositoryCardComponent: React.FC<RepositoryCardProps> = ({
return result;
}, []);

// Check if text is actually truncated by comparing scroll height with client height
// Cleanup drag hint timeout 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);
}
};
}, [repository, showAISummary]);
}, []);

const formatNumber = (num: number) => {
if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
Expand Down Expand Up @@ -878,30 +863,29 @@ 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)}
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
onFocus={() => setShowTooltip(true)}
onBlur={() => setShowTooltip(false)}
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}
onMouseLeave={() => setShowTooltip(false)}
/>
</div>

{/* 方案一：同时显示多个状态标签 */}
Expand Down
47 changes: 42 additions & 5 deletions src/components/SubscriptionRepoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -39,6 +40,10 @@ 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 abortControllerRef = useRef<AbortController | null>(null);

Expand Down Expand Up @@ -403,18 +408,50 @@ 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={() => setDescTooltip(true)}
onMouseLeave={() => setDescTooltip(false)}
onFocus={() => setDescTooltip(true)}
onBlur={() => setDescTooltip(false)}
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}
onMouseLeave={() => setDescTooltip(false)}
/>
</div>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
)}

{/* 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={() => setAiTooltip(true)}
onMouseLeave={() => setAiTooltip(false)}
onFocus={() => setAiTooltip(true)}
onBlur={() => setAiTooltip(false)}
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}
onMouseLeave={() => setAiTooltip(false)}
/>
</div>
)}

Expand Down
Loading