Skip to content

Commit 54e503b

Browse files
committed
Enhance Tooltip component functionality in DeepSeek Sparse Attention page
- Added state management for tooltip position to improve visibility and user experience. - Implemented auto-adjustment of tooltip position based on available screen space. - Updated tooltip rendering logic to reflect the actual position dynamically, enhancing interaction clarity.
1 parent c4baa18 commit 54e503b

File tree

1 file changed

+16
-5
lines changed
  • app/blog/deepseek-sparse-attention

1 file changed

+16
-5
lines changed

app/blog/deepseek-sparse-attention/page.tsx

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const tutorialContent = `## Key Innovation: DeepSeek Sparse Attention (DSA)
3838
// Tooltip Component
3939
function Tooltip({ children, content, position = "top" }: { children: React.ReactNode; content: React.ReactNode; position?: "top" | "bottom" | "left" | "right" }) {
4040
const [isVisible, setIsVisible] = useState(false);
41+
const [actualPosition, setActualPosition] = useState(position);
4142

4243
const positionClasses = {
4344
top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
@@ -46,24 +47,34 @@ function Tooltip({ children, content, position = "top" }: { children: React.Reac
4647
right: "left-full top-1/2 transform -translate-y-1/2 ml-2"
4748
};
4849

50+
const handleMouseEnter = () => {
51+
setIsVisible(true);
52+
// Auto-adjust position based on screen space
53+
if (position === "top") {
54+
setActualPosition("right"); // Default to right for better screen fit
55+
} else {
56+
setActualPosition(position);
57+
}
58+
};
59+
4960
return (
5061
<div
5162
className="relative inline-block"
52-
onMouseEnter={() => setIsVisible(true)}
63+
onMouseEnter={handleMouseEnter}
5364
onMouseLeave={() => setIsVisible(false)}
5465
>
5566
{children}
5667
{isVisible && (
57-
<div className={`absolute z-50 ${positionClasses[position]} pointer-events-none`}>
68+
<div className={`absolute z-50 ${positionClasses[actualPosition]} pointer-events-none`}>
5869
<div className="bg-slate-800/95 backdrop-blur-sm border border-slate-600/50 rounded-xl p-4 shadow-2xl max-w-xs w-max">
5970
<div className="text-white text-sm leading-relaxed">
6071
{content}
6172
</div>
6273
{/* Arrow */}
6374
<div className={`absolute w-2 h-2 bg-slate-800/95 border-r border-b border-slate-600/50 transform rotate-45 ${
64-
position === "top" ? "top-full left-1/2 -translate-x-1/2 -translate-y-1/2" :
65-
position === "bottom" ? "bottom-full left-1/2 -translate-x-1/2 translate-y-1/2" :
66-
position === "left" ? "left-full top-1/2 -translate-y-1/2 -translate-x-1/2" :
75+
actualPosition === "top" ? "top-full left-1/2 -translate-x-1/2 -translate-y-1/2" :
76+
actualPosition === "bottom" ? "bottom-full left-1/2 -translate-x-1/2 translate-y-1/2" :
77+
actualPosition === "left" ? "left-full top-1/2 -translate-y-1/2 -translate-x-1/2" :
6778
"right-full top-1/2 -translate-y-1/2 translate-x-1/2"
6879
}`}></div>
6980
</div>

0 commit comments

Comments
 (0)