From 6251ea5e6e1b8dc248652c242741a9576aa48136 Mon Sep 17 00:00:00 2001
From: Ayushi Dhiman <ayushidhiman07@gmail.com>
Date: Sun, 31 May 2026 13:19:19 +0530
Subject: [PATCH] Add contextual tooltips to feature pills for better UX

---
 frontend/index.html | 117 ++++++++++++++++++++++++--------------------
 frontend/style.css  |  65 ++++++++++++++++++++++++
 2 files changed, 128 insertions(+), 54 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 71b8e3af..85b8409d 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2082,61 +2082,70 @@ <h1 data-i18n="hero_title">Debug. Understand.<br /><em>Ship faster.</em></h1>
       </div>
     </section>
 
-    <!-- ── FEATURE PILLS ─────────────────────────────────────────── -->
-    <div class="features-row">
-      <div class="feat-pill">
-        <div class="feat-pill-icon" style="background:rgba(34,212,123,0.12)"><svg width="15" height="15"
-            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="11" cy="11" r="8" />
-            <line x1="21" y1="21" x2="16.65" y2="16.65" />
-          </svg></div>
-        <div class="feat-pill-info">
-          <h4 data-i18n="pill_patterns_title">40+ Bug Patterns</h4>
-          <p data-i18n="pill_patterns_desc">Python, JS, TS, Java, C++</p>
-        </div>
-      </div>
-      <div class="feat-pill">
-        <div class="feat-pill-icon" style="background:rgba(91,156,246,0.12)"><svg width="15" height="15"
-            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
-            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
-          </svg></div>
-        <div class="feat-pill-info">
-          <h4 data-i18n="mode_explain">Code Explanation</h4>
-          <p data-i18n="pill_explain_desc">Plain English breakdowns</p>
-        </div>
-      </div>
-      <div class="feat-pill">
-        <div class="feat-pill-icon" style="background:rgba(124,58,237,0.12)"><svg width="15" height="15"
-            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <polygon points="13,2 3,14 12,14 11,22 21,10 12,10" />
-          </svg></div>
-        <div class="feat-pill-info">
-          <h4 data-i18n="mode_improve">Smart Suggestions</h4>
-          <p data-i18n="pill_improve_desc">Quality score + grade</p>
-        </div>
-      </div>
-      <div class="feat-pill">
-        <div class="feat-pill-icon" style="background:rgba(245,146,62,0.12)"><svg width="15" height="15"
-            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-          </svg></div>
-        <div class="feat-pill-info">
-          <h4 data-i18n="pill_theme_title">Dark / Light Mode</h4>
-          <p data-i18n="pill_theme_desc">Persisted preference</p>
-        </div>
-      </div>
-      <div class="feat-pill">
-        <div class="feat-pill-icon" style="background:rgba(245,200,66,0.12)"><svg width="15" height="15"
-            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
-          </svg></div>
-        <div class="feat-pill-info">
-          <h4 data-i18n="pill_upload_title">File Upload</h4>
-          <p data-i18n="pill_upload_desc">.py .js .ts .java .cpp .kt .zip</p>
-        </div>
-      </div>
+<!-- FEATURES -->
+<div class="features-row">
+
+  <div class="feat-pill">
+    <div class="feat-pill-info">
+      <h4>
+        <span>40+ Bug Patterns</span>
+        <span class="tooltip-icon" tabindex="0" role="button"
+          aria-label="Detects bugs, logic errors, and security issues"
+          data-tooltip="Detects bugs, logic errors, and security issues">ⓘ</span>
+      </h4>
+      <p>Python, JS, TS, Java, C++</p>
+    </div>
+  </div>
+
+  <div class="feat-pill">
+    <div class="feat-pill-info">
+      <h4>
+        <span>Code Explanation</span>
+        <span class="tooltip-icon" tabindex="0" role="button"
+          aria-label="Explains code in simple language"
+          data-tooltip="Explains code in simple language">ⓘ</span>
+      </h4>
+      <p>Plain English breakdowns</p>
+    </div>
+  </div>
+
+  <div class="feat-pill">
+    <div class="feat-pill-info">
+      <h4>
+        <span>Smart Suggestions</span>
+        <span class="tooltip-icon" tabindex="0" role="button"
+          aria-label="Improves code quality and performance"
+          data-tooltip="Improves code quality and performance">ⓘ</span>
+      </h4>
+      <p>Quality score + grade</p>
     </div>
+  </div>
+
+  <div class="feat-pill">
+    <div class="feat-pill-info">
+      <h4>
+        <span>Dark / Light Mode</span>
+        <span class="tooltip-icon" tabindex="0" role="button"
+          aria-label="Switch between light and dark themes"
+          data-tooltip="Switch between light and dark themes">ⓘ</span>
+      </h4>
+      <p>Persisted preference</p>
+    </div>
+  </div>
+
+  <div class="feat-pill">
+    <div class="feat-pill-info">
+      <h4>
+        <span>File Upload</span>
+        <span class="tooltip-icon" tabindex="0" role="button"
+          aria-label="Upload code files or zip projects"
+          data-tooltip="Upload code files or zip projects">ⓘ</span>
+      </h4>
+      <p>.py .js .ts .java .cpp .kt .zip</p>
+    </div>
+  </div>
+
+</div>
 
     <!-- ── WORKSPACE ─────────────────────────────────────────────── -->
     <section id="workspace" class="workspace">
diff --git a/frontend/style.css b/frontend/style.css
index b05b82a7..f7796f1e 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -611,3 +611,68 @@ body {
     text-align: center;
   }
 }
+/* ── TOOLTIP STYLES ─────────────────────────────────────────── */
+
+.tooltip-icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 6px;
+  border-radius: 50%;
+  background: var(--bg-3);
+  color: var(--text-2);
+  font-size: 11px;
+  cursor: help;
+}
+.tooltip-icon::after {
+  content: attr(data-tooltip);
+
+  position: absolute;
+  bottom: 130%;
+  left: 50%;
+  transform: translateX(-50%);
+
+  min-width: 220px;
+  max-width: 260px;
+
+  padding: 8px 10px;
+  border-radius: 6px;
+
+  background: #222;
+  color: white;
+
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: center;
+
+  opacity: 0;
+  visibility: hidden;
+
+  transition: opacity 0.2s ease;
+
+  z-index: 1000;
+  pointer-events: none;
+}
+
+/* Show tooltip on mouse hover */
+.tooltip-icon:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Show tooltip when keyboard focuses it */
+.tooltip-icon:focus::after {
+  opacity: 1;
+  visibility: visible;
+}
+.tooltip-icon {
+  flex-shrink: 0;
+}
+.feat-pill-info h4 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
\ No newline at end of file