Initial commit

components/help-tip.tsx

@@ -0,0 +1,30 @@
+'use client';
+import { CircleHelp } from 'lucide-react';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { HELP } from '@/game/reference';
+
+export function HelpTip({ topic }: { topic: keyof typeof HELP }) {
+  return (
+    <Popover>
+      <PopoverTrigger
+        className="help-tip"
+        aria-label={`Help: ${topic}`}
+        openOnHover
+        delay={200}
+      >
+        <CircleHelp size={14} aria-hidden="true" />
+      </PopoverTrigger>
+      <PopoverContent
+        className="game-help-tooltip motion-reduce:animate-none"
+        aria-label={`Help: ${topic}`}
+        side="top"
+      >
+        {HELP[topic]}
+      </PopoverContent>
+    </Popover>
+  );
+}