From 766087357bd921da031b1d092c9992870812821a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mike=20Schw=C3=B6rer?= <pubgit@mikescher.com>
Date: Fri, 18 Jul 2025 23:52:32 +0200
Subject: [PATCH] Fix EGG tooltip css/script

---
 www/data/javascript/extendedgitgraph.js | 77 +++++++++++++------------
 www/extern/egg/OutputGenerator.php      |  2 +-
 2 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/www/data/javascript/extendedgitgraph.js b/www/data/javascript/extendedgitgraph.js
index 5894c4c..1f07ee5 100644
--- a/www/data/javascript/extendedgitgraph.js
+++ b/www/data/javascript/extendedgitgraph.js
@@ -2,46 +2,47 @@
 var ExtendedGitGraph2;
 (function (ExtendedGitGraph2) {
     function initHover() {
-        const allsvgtips = Array.from(document.getElementsByClassName("svg-tip"));
-        if (allsvgtips.length == 0)
-            return;
-        const masterTip = allsvgtips[0];
-        masterTip.style.opacity = '1';
-        masterTip.style.display = 'none';
-        const masterTipHeader = masterTip.getElementsByTagName('strong')[0];
-        const masterTipContent = masterTip.getElementsByTagName('span')[0];
-        const masterTipExtra = masterTip.getElementsByTagName('span')[0];
-        const rects = Array.from(document.getElementsByClassName("egg_rect"));
-        for (let rect of rects) {
-            rect.addEventListener("mouseenter", event => {
-                const target = event.target;
-                let count = target.getAttribute('data-count');
-                let date = target.getAttribute('data-date');
-                masterTip.style.display = 'block';
-                masterTipHeader.innerHTML = count + ' commits';
-                masterTipContent.innerHTML = ' on ' + date;
-                if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
-                    masterTipExtra.style.display = 'grid';
-                    const extraAttr = target.getAttributeNames().sort().filter(p => p.startsWith('data-repo-')).map(p => target.getAttribute(p));
-                    let extraHTML = '';
-                    for (const attr of extraAttr) {
-                        try {
-                            let obj = JSON.parse(attr.replace(/'/g, '"'));
-                            extraHTML += `<span class="extra-attr">[${obj.source}] ${obj.repo_name}:</span><strong>${obj.count}</strong>\n`;
-                        }
-                        catch (e) {
-                            console.error('Error parsing extra attribute:', attr, e);
+        for (const container of document.querySelectorAll('.extGitGraphContainer')) {
+            const masterTip = container.querySelector('.svg-tip');
+            if (masterTip === null)
+                continue;
+            masterTip.style.opacity = '1';
+            masterTip.style.display = 'none';
+            const masterTipHeader = masterTip.querySelector('.caption');
+            const masterTipContent = masterTip.querySelector('.date');
+            const masterTipExtra = masterTip.querySelector('.extra');
+            const rects = Array.from(container.querySelectorAll(".egg_rect"));
+            for (let rect of rects) {
+                rect.addEventListener("mouseenter", event => {
+                    const target = event.target;
+                    let count = target.getAttribute('data-count');
+                    let date = target.getAttribute('data-date');
+                    masterTip.style.display = 'block';
+                    masterTipHeader.innerHTML = count + ' commits';
+                    masterTipContent.innerHTML = ' on ' + date;
+                    if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
+                        masterTipExtra.style.display = 'grid';
+                        const extraAttr = target.getAttributeNames().sort().filter(p => p.startsWith('data-repo-')).map(p => target.getAttribute(p));
+                        let extraHTML = '';
+                        for (const attr of extraAttr) {
+                            try {
+                                let obj = JSON.parse(attr.replace(/'/g, '"'));
+                                extraHTML += `<span class="extra-attr">${obj.repo_name}:</span><strong>${obj.count}</strong>\n`;
+                            }
+                            catch (e) {
+                                console.error('Error parsing extra attribute:', attr, e);
+                            }
                         }
+                        masterTipExtra.innerHTML = extraHTML;
                     }
-                    masterTipExtra.innerHTML = extraHTML;
-                }
-                else {
-                    masterTipExtra.style.display = 'none';
-                }
-                masterTip.style.left = (window.pageXOffset + target.getBoundingClientRect().left - masterTip.getBoundingClientRect().width / 2 - 3.5 + 9) + 'px';
-                masterTip.style.top = (window.pageYOffset + target.getBoundingClientRect().top - masterTip.getBoundingClientRect().height - 10) + 'px';
-            });
-            rect.addEventListener("mouseleave", _ => masterTip.style.display = 'none');
+                    else {
+                        masterTipExtra.style.display = 'none';
+                    }
+                    masterTip.style.left = (window.pageXOffset + target.getBoundingClientRect().left - masterTip.getBoundingClientRect().width / 2 - 3.5 + 9) + 'px';
+                    masterTip.style.top = (window.pageYOffset + target.getBoundingClientRect().top - masterTip.getBoundingClientRect().height - 10) + 'px';
+                });
+                rect.addEventListener("mouseleave", _ => masterTip.style.display = 'none');
+            }
         }
     }
     ExtendedGitGraph2.initHover = initHover;
diff --git a/www/extern/egg/OutputGenerator.php b/www/extern/egg/OutputGenerator.php
index e9d509e..8d22401 100644
--- a/www/extern/egg/OutputGenerator.php
+++ b/www/extern/egg/OutputGenerator.php
@@ -291,7 +291,7 @@ class SingleYearRenderer implements IOutputGenerator
 		$html .= '</g>' . "\n";
 		$html .= '</svg>' . "\n";
 		$html .= '<div class="svg-tip n"">' . "\n";
-		$html .= '<strong>&nbsp;</strong><span>&nbsp;</span><div style="display: grid; grid-template-columns: auto 1fr; grid-column-gap: 0.5rem; margin-top: 1rem; text-align: right;"></div>' . "\n";
+		$html .= '<strong class="caption">&nbsp;</strong><span class="date">&nbsp;</span><div class="extra" style="display: grid; grid-template-columns: auto 1fr; grid-column-gap: 0.5rem; margin-top: 1rem; text-align: right;"></div>' . "\n";
 		$html .= '</div>' . "\n";
 		$html .= '<div class="egg_footer">' . "\n";
 		$html .= '<a href="https://www.mikescher.com/programs/view/ExtendedGitGraph">extendedGitGraph</a>' . "\n";