Update style.css

style.css

@@ -1428,4 +1428,79 @@ pre:hover .copy-btn { opacity: 1; }
 
 @media (max-width: 640px) {
     .cow-pen { height: 56px; }
+}
+
+/* -------------------- TOOLTIPS -------------------- */
+
+.tooltip {
+    position: relative;
+}
+
+.tooltip::after {
+    content: attr(data-tooltip);
+
+    position: absolute;
+    left: 50%;
+    bottom: calc(100% + 10px);
+
+    transform: translateX(-50%) translateY(4px);
+
+    padding: 8px 12px;
+    border-radius: 10px;
+
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+
+    backdrop-filter: blur(20px) saturate(1.2);
+    -webkit-backdrop-filter: blur(20px) saturate(1.2);
+
+    color: var(--heading);
+    font-size: 0.78rem;
+    font-weight: 500;
+    white-space: nowrap;
+
+    box-shadow: var(--shadow-hover);
+
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+
+    transition:
+        opacity .08s ease,
+        transform .08s ease,
+        visibility .08s;
+}
+
+.tooltip::before {
+    content: "";
+
+    position: absolute;
+    left: 50%;
+    bottom: calc(100% + 4px);
+
+    width: 8px;
+    height: 8px;
+
+    transform: translateX(-50%) rotate(45deg);
+
+    background: var(--surface-2);
+    border-right: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+
+    transition:
+        opacity .08s ease,
+        visibility .08s;
+}
+
+.tooltip:hover::after,
+.tooltip:hover::before,
+.tooltip:focus-visible::after,
+.tooltip:focus-visible::before {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0);
 }