From ae130ff776b46710d39c0faa0ef8e41431b5de5c Mon Sep 17 00:00:00 2001
From: Tobias Brunner <tobias.brunner@vshn.ch>
Date: Wed, 16 Jul 2025 15:59:51 +0200
Subject: [PATCH] tooltips for main numbers

---
 .../calculator/csp_roi_calculator.html        | 77 ++++++++++++++++++-
 1 file changed, 73 insertions(+), 4 deletions(-)

diff --git a/hub/services/templates/calculator/csp_roi_calculator.html b/hub/services/templates/calculator/csp_roi_calculator.html
index b608679..f0c4d92 100644
--- a/hub/services/templates/calculator/csp_roi_calculator.html
+++ b/hub/services/templates/calculator/csp_roi_calculator.html
@@ -184,6 +184,16 @@
     margin-bottom: 0;
 }
 
+/* Tooltip styling for better native tooltip appearance */
+[data-bs-toggle="tooltip"] {
+    position: relative;
+}
+
+/* Enhanced cursor for tooltip elements */
+[data-bs-toggle="tooltip"]:hover {
+    opacity: 0.8;
+}
+
 @media (max-width: 768px) {
     .chart-container {
         height: 300px;
@@ -602,25 +612,53 @@
                 <div class="col-md-3 col-sm-6">
                     <div class="metric-card text-center">
                         <div class="metric-value" id="total-instances">0</div>
-                        <div class="metric-label">Total Instances</div>
+                        <div class="metric-label">
+                            Total Instances
+                            <i class="bi bi-question-circle-fill text-muted ms-1" 
+                               data-bs-toggle="tooltip" 
+                               data-bs-placement="top" 
+                               title="Average final number of cloud instances across all enabled scenarios at the end of your investment timeframe. This represents the scale of your cloud infrastructure business."
+                               style="cursor: help; font-size: 0.8rem;"></i>
+                        </div>
                     </div>
                 </div>
                 <div class="col-md-3 col-sm-6">
                     <div class="metric-card text-center">
                         <div class="metric-value" id="total-revenue">CHF 0</div>
-                        <div class="metric-label">Total Revenue</div>
+                        <div class="metric-label">
+                            Total Revenue
+                            <i class="bi bi-question-circle-fill text-muted ms-1" 
+                               data-bs-toggle="tooltip" 
+                               data-bs-placement="top" 
+                               title="Average total revenue generated across all enabled scenarios over your investment timeframe. This includes both CSP revenue (what you keep) and Servala revenue (platform fees)."
+                               style="cursor: help; font-size: 0.8rem;"></i>
+                        </div>
                     </div>
                 </div>
                 <div class="col-md-3 col-sm-6">
                     <div class="metric-card text-center">
                         <div class="metric-value" id="roi-percentage">0%</div>
-                        <div class="metric-label">Average ROI</div>
+                        <div class="metric-label">
+                            Average ROI
+                            <i class="bi bi-question-circle-fill text-muted ms-1" 
+                               data-bs-toggle="tooltip" 
+                               data-bs-placement="top" 
+                               title="Return on Investment: Average percentage return across all enabled scenarios. Calculated as (CSP Revenue - Initial Investment) / Initial Investment × 100%. Shows how much profit you make relative to your initial investment."
+                               style="cursor: help; font-size: 0.8rem;"></i>
+                        </div>
                     </div>
                 </div>
                 <div class="col-md-3 col-sm-6">
                     <div class="metric-card text-center">
                         <div class="metric-value" id="breakeven-time">N/A</div>
-                        <div class="metric-label">Avg Break-even</div>
+                        <div class="metric-label">
+                            Avg Break-even
+                            <i class="bi bi-question-circle-fill text-muted ms-1" 
+                               data-bs-toggle="tooltip" 
+                               data-bs-placement="top" 
+                               title="Average time in months across all scenarios when your cumulative CSP revenue equals your initial investment. This is when you've recovered your upfront costs and start making pure profit."
+                               style="cursor: help; font-size: 0.8rem;"></i>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -1160,10 +1198,41 @@ document.addEventListener('DOMContentLoaded', function() {
     // Initialize calculator
     calculator = new ROICalculator();
     
+    // Initialize tooltips - check if Bootstrap is available
+    initializeTooltips();
+    
     // Check if export libraries are loaded and enable/disable buttons accordingly
     checkExportLibraries();
 });
 
+// Initialize tooltips with fallback for missing Bootstrap
+function initializeTooltips() {
+    // Check if Bootstrap is available
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        // Use Bootstrap tooltips
+        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+            return new bootstrap.Tooltip(tooltipTriggerEl);
+        });
+    } else {
+        // Fallback: Use native title attribute tooltips
+        console.log('Bootstrap not available, using native tooltips');
+        var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+        tooltipElements.forEach(function(element) {
+            // Move the tooltip content to the native title attribute
+            if (element.getAttribute('title')) {
+                // Title already set, no need to change
+                return;
+            }
+            var tooltipContent = element.getAttribute('data-bs-original-title') || 
+                               element.getAttribute('title');
+            if (tooltipContent) {
+                element.setAttribute('title', tooltipContent);
+            }
+        });
+    }
+}
+
 // Check if export libraries are loaded
 function checkExportLibraries() {
     const pdfButton = document.querySelector('button[onclick="exportToPDF()"]');