docs(docs): fix cursor handling and hover tip refactor in docs UI components

apps/docs/islands/TopicBubbles.tsx

@@ -35,7 +35,7 @@ function lines(name: string): string[] {
 
 export default function TopicBubbles() {
   const load = useStats();
-  const hover = useHoverTip<HTMLDivElement>();
+  const { ref, show, hide, node } = useHoverTip<HTMLDivElement>();
   const clip = useId().replace(/:/g, "");
 
   if (load.phase !== "ready") {
@@ -70,7 +70,7 @@ export default function TopicBubbles() {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <div ref={hover.ref} className="relative mx-auto w-full max-w-xl" onPointerLeave={hover.hide}>
+        <div ref={ref} className="relative mx-auto w-full max-w-xl" onPointerLeave={hide}>
           <svg
             viewBox={`${bound.x - bound.r} ${bound.y - bound.r} ${bound.r * 2} ${bound.r * 2}`}
             className="h-auto w-full"
@@ -89,7 +89,7 @@ export default function TopicBubbles() {
                   key={c.issue}
                   className={cn("transition-opacity hover:opacity-90", !c.taught && "opacity-50")}
                   onPointerMove={(event) =>
-                    hover.show(
+                    show(
                       event,
                       <>
                         <div className="font-medium">{c.name}</div>
@@ -131,7 +131,7 @@ export default function TopicBubbles() {
               );
             })}
           </svg>
-          {hover.node}
+          {node}
         </div>
       </CardContent>
     </Card>