updated readme, added question bubble

Signed-off-by: Vedansh Saini <[email protected]>

Author: vedansh-5

README.md

@@ -116,8 +116,47 @@ Scrum Helper is not limited to the [FOSSASIA](https://github.com/fossasia) organ
    * Save your changes.
    * For Chrome: Rebuild or reload the extension in your browser (`chrome://extensions` → Refresh your extension).
    * For Firefox: Reload the temporary add-on by going to `about:debugging` → "This Firefox" → Click "Reload" next to your extension.
-4. **Get Customized SCRUM Reports**
-   - The reports will now be generated using contributions from your organization.
+
+4. **How to Obtain a GitHub Personal Access Token**
+
+- To use Scrum Helper with authenticated requests (for higher rate limits and private repositories), you need a GitHub personal access token.
+
+  #### Steps to Generate a Token
+
+  1. **Go to GitHub Developer Settings:**  
+    Visit [https://github.com/settings/tokens](https://github.com/settings/tokens) while logged in to your GitHub account.
+
+  2. **Choose Token Type:**  
+    - For most users, select **"Fine-grained tokens"** (recommended) or **"Personal access tokens (classic)"**.
+
+  3. **Generate a New Token:**  
+    - Click **"Generate new token"**.
+    - Give your token a descriptive name (e.g., "Scrum Helper Extension").
+    - Set an expiration date if desired.
+
+  4. **Select Scopes/Permissions:**  
+    - At minimum, select:
+      - `repo` (for access to your repositories)
+      - `read:user` (to read your user profile)
+    - For private repositories, ensure you grant access to those as well.
+
+  5. **Create and Copy the Token:**  
+    - Click **"Generate token"** at the bottom.
+    - **Copy the token** and save it securely. You will not be able to see it again!
+
+  6. **Paste the Token in Scrum Helper:**  
+    - Open the Scrum Helper extension popup.
+    - Paste your token into the "GitHub Token" field.
+
+  > **Keep your token secret!** Never share it or commit it to public repositories.
+
+  **Why use a token?**  
+  GitHub tokens allow the extension to make authenticated requests, increasing your API rate limit and enabling access to private repositories if you grant those permissions.
+
+  ---
+5. **Get Customized SCRUM Reports**
+    - The reports will now be generated using contributions from your organization.
+
 
 
 ## About contributing

src/index.css

@@ -253,79 +253,47 @@ body,input,div,h3,h4,p,label,hr, #scrumReport{
 }
 
 .tooltip-bubble {
-    visibility: hidden;
-    opacity: 0;
-    position: absolute;
-    background-color: #1f2937;
-    color: white;
-    text-align: left;
-    padding: 12px;
-    border-radius: 8px;
-    font-size: 12px;
-    line-height: 1.4;
+    position: fixed !important;
+    z-index: 9999;
+    background: #f9fafb;
+    color: #222;
+    border-radius: 10px;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.12), 0 1.5px 4px 0 rgba(0,0,0,0.08);
+    padding: 14px 18px;
+    font-size: 13px;
+    line-height: 1.5;
+    min-width: 220px;
+    max-width: 320px;
     white-space: normal;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    z-index: 1000;
-    transition: opacity 0.3s ease, visibility 0.3s ease;
-    width: 280px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.18s;
 }
 
-.tooltip-bubble {
-    bottom: 125%;
-    left: 150%;
-    transform: translateX(-50%);
+.tooltip-container:hover .tooltip-bubble,
+.tooltip-container:focus-within .tooltip-bubble {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.tooltip-bubble a {
+    color: #2563eb;
+    text-decoration: underline;
 }
 
 .tooltip-bubble::after {
     content: "";
     position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
+    width: 0; height: 0;
     border-style: solid;
-    border-color: #1f2937 transparent transparent transparent;
-}
-
-.tooltip-container.tooltip-bottom .tooltip-bubble {
-    top: 125%;
-    bottom: auto;
-}
-
-.tooltip-container.tooltip-bottom .tooltip-bubble::after {
-    top: -10px;
-    border-color: transparent transparent #1f2937 transparent;
-}
-
-.tooltip-container.tooltip-right .tooltip-bubble {
-    top: -5px;
-    left: 125%;
-    bottom: auto;
-    transform: none;
-}
-
-.tooltip-container.tooltip-right .tooltip-bubble::after {
-    top: 15px;
-    left: -10px;
-    border-color: transparent #1f2937 transparent transparent;
-}
-
-.tooltip-container:hover .tooltip-bubble {
-    visibility: visible;
-    opacity: 1;
-}
-
-.dark-mode .question-icon {
-    color: #9ca3af;
 }
 
-.dark-mode .question-icon:hover {
-    color: #60a5fa;
-}
 
 .dark-mode .tooltip-bubble {
-    background-color: #374151;
-    border: 1px solid #4b5563;
+    background: #f3f4f6;
+    color: #222;
+    border: 1px solid #374151;
 }
 
 .dark-mode .tooltip-bubble::after {
@@ -364,4 +332,19 @@ body,input,div,h3,h4,p,label,hr, #scrumReport{
   box-shadow: 0 0 0 2px #3b82f6;
   opacity: 0.7;
   transform: translateX(8px) scale(1.03);
+}
+
+.dark-mode #githubToken,
+.dark-mode .token-preview-char {
+    background: #404040 !important;
+    border-color: #505050 !important;
+    color: #fff !important;
+}
+
+.dark-mode .token-preview-dot {
+    background: #9ca3af !important;
+}
+
+.dark-mode .token-preview-char {
+    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
 }

src/popup.html

@@ -113,13 +113,28 @@ <h6 class="text-base font-semibold">Scrum Report</h6>
 
 					<div class="">
 						<div class="flex items-center justify-between">
-							<h4>Your Github Token</h4>
+							<div class="flex">
+								<h4>Your Github Token</h4>
+								<span class="tooltip-container">
+									<i class="fa fa-question-circle question-icon"></i>
+									<span class="tooltip-bubble">
+										<b>Why use a GitHub Token?</b><br>
+										Using a personal access token allows the extension to make authenticated requests to GitHub, increasing your API rate limit and enabling access to private repositories (if you grant those permissions).<br><br>
+										<b>How to obtain:</b><br>
+										1. Go to <a href="https://github.com/settings/tokens" target="_blank" style="color:#2563eb;text-decoration:underline;">GitHub Developer Settings</a>.<br>
+										2. Click "Fine-grained tokens" or "Personal access tokens".<br>
+										3. Click "Generate new token", select scopes (at least <code>repo</code> and <code>read:user</code>), and copy the token.<br>
+										4. Paste it here.<br>
+										<i>Keep your token secret!</i>
+									</span>
+								</span>
+							</div>
 							<button id="toggleTokenVisibility" type="button" class="focus:outline-none">
 								<i id="tokenEyeIcon" class="fa fa-eye text-gray-600"></i>
 							</button>
 						</div>
 						<input id="githubToken" type="password" class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2 pr-10" placeholder="Required for making authenticated requests">
-						<p class="text-sm font-medium">Enter cache TTL <span class="text-sm text-gray-800 font-normal">(in minutes)</span>
+						<p class="text-sm font-medium">Enter cache TTL <span class="text-sm font-normal">(in minutes)</span>
 							<span class="tooltip-container">
 								<i class="fa fa-question-circle question-icon"></i>
 								<span class="tooltip-bubble">

src/scripts/popup.js

@@ -83,8 +83,28 @@ document.addEventListener('DOMContentLoaded', function() {
         if(settingsIcon){
             settingsIcon.src = isDarkMode ? 'icons/settings-night.png' : 'icons/settings-light.png';
         }
+        renderTokenPreview();
     });
 
+    function renderTokenPreview() {
+        tokenPreview.innerHTML = '';
+        const value = githubTokenInput.value;
+        const isDark = document.body.classList.contains('dark-mode');
+        for (let i = 0; i < value.length; i++) {
+            const charBox = document.createElement('span');
+            charBox.className = 'token-preview-char' + (isDark ? ' dark-mode' : '');
+            if (tokenVisible) {
+                charBox.textContent = value[i];
+            } else {
+                const dot = document.createElement('span');
+                dot.className = 'token-preview-dot' + (isDark ? ' dark-mode' : '');
+                charBox.appendChild(dot);
+            }
+            tokenPreview.appendChild(charBox);
+            setTimeout(() => charBox.classList.add('flip'), 10 + i * 30);
+        }
+    }
+
     function updateContentState(enableToggle) {
         const elementsToToggle = [
             'startingDate',
@@ -314,6 +334,46 @@ document.addEventListener('DOMContentLoaded', function() {
 
 });
 
+// Tooltip bubble 
+document.querySelectorAll('.tooltip-container').forEach(container => {
+    const bubble = container.querySelector('.tooltip-bubble');
+    if (!bubble) return;
+
+    function positionTooltip() {
+        const icon = container.querySelector('.question-icon') || container;
+        const rect = icon.getBoundingClientRect();
+        const bubbleRect = bubble.getBoundingClientRect();
+        const padding = 8;
+
+        let top = rect.top + window.scrollY;
+        let left = rect.right + padding + window.scrollX;
+
+        if (left + bubbleRect.width > window.innerWidth - 10) {
+            left = rect.left - bubbleRect.width - padding + window.scrollX;
+        }
+        if (left < 8) left = 8;
+        if (top + bubbleRect.height > window.innerHeight - 10) {
+            top = rect.top - bubbleRect.height - padding + window.scrollY;
+        }
+        if (top < 8) top = 8;
+
+        bubble.style.left = left + 'px';
+        bubble.style.top = top + 'px';
+    }
+
+    container.addEventListener('mouseenter', positionTooltip);
+    container.addEventListener('focusin', positionTooltip);
+    container.addEventListener('mousemove', positionTooltip);
+    container.addEventListener('mouseleave', () => {
+        bubble.style.left = '';
+        bubble.style.top = '';
+    });
+    container.addEventListener('focusout', () => {
+        bubble.style.left = '';
+        bubble.style.top = '';
+    });
+});
+
 // Radio button click handlers with toggle functionality
 document.querySelectorAll('input[name="timeframe"]').forEach(radio => {
     radio.addEventListener('click', function() {