Fix original price popup

Author: Mihir

src/main.css

@@ -98,6 +98,7 @@
 #strict-mode,
 .budget-mode {
     position: relative !important;
+    overflow: visible !important;
 }
 
 #strict-mode::after {
@@ -115,10 +116,7 @@
 }
 
 .budget-price {
-    position: absolute !important;
-    bottom: 100% !important;
-    left: 50% !important;
-    transform: translateX(-50%) !important;
+    position: fixed !important;
     background-color: #1a1a1a !important;
     color: #ffffff !important;
     padding: 6px 10px !important;
@@ -130,14 +128,9 @@
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
     opacity: 0 !important;
     visibility: hidden !important;
-    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease !important;
-    transform: translateX(-50%) translateY(-4px) !important;
-    margin-bottom: 8px !important;
+    transition: opacity 0.15s ease, visibility 0.15s ease !important;
     font-weight: 500 !important;
     font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif !important;
-    /* Prevent clipping by parent containers */
-    contain: none !important;
-    will-change: opacity, visibility, transform !important;
 }
 
 .budget-price::before {
@@ -160,7 +153,6 @@
 .budget-mode:hover .budget-price {
     opacity: 1 !important;
     visibility: visible !important;
-    transform: translateX(-50%) translateY(0) !important;
 }
 
 @media (prefers-color-scheme: dark) {

src/main.js

@@ -164,7 +164,32 @@ function createHiddenEarlierPriceElement(earlierPrice, priceElement) {
     span.classList.add('budget-price');
     span.innerText = earlierPrice;
     priceElement.appendChild(span);
-    // Tooltip is now controlled via CSS hover on #strict-mode
+    
+    // Position tooltip on hover using fixed positioning
+    const positionTooltip = () => {
+        const rect = priceElement.getBoundingClientRect();
+        const tooltipRect = span.getBoundingClientRect();
+        
+        // Position above the element, centered
+        const left = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
+        const top = rect.top - tooltipRect.height - 8; // 8px gap
+        
+        span.style.left = `${left}px`;
+        span.style.top = `${top}px`;
+    };
+    
+    // Update position on hover
+    priceElement.addEventListener('mouseenter', positionTooltip);
+    
+    // Also update on scroll to keep it positioned correctly
+    let scrollTimeout;
+    const handleScroll = () => {
+        if (priceElement.matches(':hover')) {
+            clearTimeout(scrollTimeout);
+            scrollTimeout = setTimeout(positionTooltip, 10);
+        }
+    };
+    window.addEventListener('scroll', handleScroll, true);
 }
 
 function addZerosToNumber(actualPrice, strictlyAdjustedPrice) {
@@ -332,11 +357,11 @@ function append(elementInfo, element, productPrice, settings, isPriceRange) {
     if (settings.hoverMode) {
         // Hover Mode Attributes
         badge.style.display = 'none';
-        element.addEventListener('mouseover', function handleMouseOver() {
+        desiredElement.addEventListener('mouseover', function handleMouseOver() {
             badge.style.display = 'inline-flex';
         });
         desiredElement.setAttribute("title", `It will take you ${getTimeTakenToEarn(productPrice, settings.salary)} to earn ${productPrice}`);
-        element.addEventListener('mouseout', function handleMouseOut() {
+        desiredElement.addEventListener('mouseout', function handleMouseOut() {
             badge.style.display = 'none';
         });
     } else if (!isPriceRange) {