Skip to content

Commit c52a6be

Browse files
committed
Improve ToC tooltips: position above items, auto-dismiss after 1s
- Move tooltip above the item instead of to the left - Use right-anchored positioning to allow proper width expansion - Auto-dismiss tooltip after 1 second - Increase max-width to 450px
1 parent 998fa25 commit c52a6be

1 file changed

Lines changed: 21 additions & 6 deletions

File tree

src/App.jsx

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -633,20 +633,35 @@ function App() {
633633
};
634634

635635
// ToC item tooltip handlers
636+
const tocTooltipTimeoutRef = useRef(null);
637+
636638
const handleTocItemMouseEnter = (event, text) => {
639+
// Clear any existing timeout
640+
if (tocTooltipTimeoutRef.current) {
641+
clearTimeout(tocTooltipTimeoutRef.current);
642+
}
643+
637644
const rect = event.currentTarget.getBoundingClientRect();
638-
const tooltipX = rect.left - 40; // Position 40px to the left of the item's left edge
639-
const tooltipY = rect.top + rect.height / 2; // Center vertically with item
645+
const tooltipRight = window.innerWidth - rect.right + 10; // Distance from right edge of viewport
646+
const tooltipY = rect.top - 8; // Position above the item with small gap
640647

641648
setTocItemTooltip({
642649
show: true,
643650
content: text,
644-
x: tooltipX,
651+
x: tooltipRight, // Now storing right offset instead of left
645652
y: tooltipY,
646653
});
654+
655+
// Auto-dismiss after 1 second
656+
tocTooltipTimeoutRef.current = setTimeout(() => {
657+
setTocItemTooltip({ show: false, content: "", x: 0, y: 0 });
658+
}, 1000);
647659
};
648660

649661
const handleTocItemMouseLeave = () => {
662+
if (tocTooltipTimeoutRef.current) {
663+
clearTimeout(tocTooltipTimeoutRef.current);
664+
}
650665
setTocItemTooltip({ show: false, content: "", x: 0, y: 0 });
651666
};
652667

@@ -2667,10 +2682,10 @@ function App() {
26672682
<div
26682683
className="fixed z-50 bg-gray-900 text-white px-3 py-2 rounded-lg shadow-xl pointer-events-none text-sm border border-gray-600"
26692684
style={{
2670-
left: `${tocItemTooltip.x}px`,
2685+
right: `${tocItemTooltip.x}px`,
26712686
top: `${tocItemTooltip.y}px`,
2672-
maxWidth: "300px",
2673-
transform: "translate(-100%, -50%)",
2687+
maxWidth: "450px",
2688+
transform: "translateY(-100%)",
26742689
}}
26752690
>
26762691
{tocItemTooltip.content}

0 commit comments

Comments
 (0)