feat(frontend): add tooltips for better UX

frontend/src/components/HomeComponents/SetupGuide/CopyableCode.tsx

@@ -2,6 +2,7 @@ import { CopyIcon, Eye, EyeOff } from 'lucide-react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { toast } from 'react-toastify';
 import { useState } from 'react';
+import Tooltip from '../../ui/tooltip';
 
 interface CopyableCodeProps {
   text: string;
@@ -50,24 +51,36 @@ export const CopyableCode = ({
         </code>
       </div>
       {isSensitive && (
-        <button
-          onClick={() => setShowSensitive(!showSensitive)}
-          className="bg-gray-700 hover:bg-gray-600 text-white font-bold p-3 sm:p-4 rounded flex-shrink-0"
-          aria-label={
+        <Tooltip
+          title={
             showSensitive ? 'Hide sensitive value' : 'Show sensitive value'
           }
+          position="bottom"
         >
-          {showSensitive ? (
-            <EyeOff className="size-5" />
-          ) : (
-            <Eye className="size-5" />
-          )}
-        </button>
+          <button
+            onClick={() => setShowSensitive(!showSensitive)}
+            className="bg-gray-700 hover:bg-gray-600 text-white font-bold p-3 sm:p-4 rounded flex-shrink-0"
+            aria-label={
+              showSensitive ? 'Hide sensitive value' : 'Show sensitive value'
+            }
+          >
+            {showSensitive ? (
+              <EyeOff className="size-5" />
+            ) : (
+              <Eye className="size-5" />
+            )}
+          </button>
+        </Tooltip>
       )}
       <CopyToClipboard text={copyText} onCopy={() => handleCopy(copyText)}>
-        <button className="bg-blue-500 hover:bg-gray-900 text-white font-bold p-3 sm:p-4 rounded flex-shrink-0">
-          <CopyIcon className="size-5" />
-        </button>
+        <Tooltip title="Copy to clipboard" position="bottom">
+          <button
+            className="bg-blue-500 hover:bg-blue-600 active:bg-blue-800 text-white font-bold p-3 sm:p-4 rounded flex-shrink-0"
+            aria-label="Copy to clipboard"
+          >
+            <CopyIcon className="size-5" />
+          </button>
+        </Tooltip>
       </CopyToClipboard>
     </div>
   );

frontend/src/components/ui/tooltip.tsx

@@ -0,0 +1,25 @@
+interface TooltipProps {
+  children: React.ReactNode;
+  title: string;
+  position?: 'top' | 'bottom';
+}
+
+const Tooltip = ({ children, title, position }: TooltipProps) => {
+  const topClasses =
+    'after:-translate-x-1/2 after:left-1/2 group-hover:bottom-full group-hover:opacity-100 -translate-y-2.5 bottom-1/2 group-focus:opacity-100 group-focus:bottom-full';
+  const bottomClasses =
+    'after:top-0 after:-translate-y-1/2 after:left-1/2 after:-translate-x-1/2 top-1/2 group-hover:top-full group-hover:opacity-100 translate-y-2.5 group-focus:opacity-100 group-focus:top-full';
+
+  return (
+    <div className="relative group" tabIndex={0}>
+      {children}
+      <span
+        className={`pointer-events-none z-10 bg-stone-700 opacity-0 text-white px-2 text-nowrap py-1 text-xs absolute left-1/2 -translate-x-1/2 rounded-sm transition-['transform,opacity'] shadow-slate-900/60 duration-200 after:size-2 after:rotate-45 after:block after:bg-stone-700 after:absolute shadow-md ${position === 'top' ? topClasses : bottomClasses}`}
+      >
+        {title}
+      </span>
+    </div>
+  );
+};
+
+export default Tooltip;