From 567d09a7ae9383bb468ce351e7621e077b44e551 Mon Sep 17 00:00:00 2001
From: Ethan Jones <Ethanbjones01@gmail.com>
Date: Fri, 20 Mar 2026 17:11:14 -0500
Subject: [PATCH] Fix: Add hover tooltip to language bars

- Wrap language bars in container div
- Add CSS tooltip that shows on hover
- Display language name and percentage

Fixes #8
---
 src/renderer/src/assets/main.css              | 29 +++++++++++++++++++
 .../src/components/GitHubStatsWidget.tsx      | 11 +++++--
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index 764f5ce..ea4019f 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -319,6 +319,35 @@ code {
   opacity: 0.8; 
 }
 
+.barr-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.language-tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #222;
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  pointer-events: none;
+  margin-bottom: 4px;
+  z-index: 100;
+}
+
+.barr-wrapper:hover .language-tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+
 ::-webkit-scrollbar {
   display: none;
 }
diff --git a/src/renderer/src/components/GitHubStatsWidget.tsx b/src/renderer/src/components/GitHubStatsWidget.tsx
index 684bc4e..ba05239 100644
--- a/src/renderer/src/components/GitHubStatsWidget.tsx
+++ b/src/renderer/src/components/GitHubStatsWidget.tsx
@@ -192,14 +192,19 @@ function GitHubStatsWidget({
               const percentage = ((count / totalLangCount) * 100).toFixed(1)
               // const width = Math.max(40, Math.min(80, (parseFloat(percentage) / 100) * 200))
               return (
-            <button
+            <div
             key={item}
+            className="barr-wrapper"
+            style={{position: 'relative', display: 'inline-block'}}
+          >
+            <button
             onClick={onLogout}
             className="barr"
-            style={{backgroundColor: getLangColor(item),}}
-            title={`${item}: ${percentage}%`}
+            style={{backgroundColor: getLangColor(item)}}
           >
               </button>
+            <span className="language-tooltip">{item}: {percentage}%</span>
+            </div>
           )})}
           </div>
           <button