servala/website
1
0
Fork 0
Code Issues 12 Pull requests Projects 1 Packages 1 Activity Actions

tooltips for main numbers

Browse source
This commit is contained in:
Tobias Brunner 2025-07-16 15:59:51 +02:00
parent 27d2d3bb7a
commit ae130ff776
Signed by: tobru
SSH key fingerprint: SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
1 changed files with 73 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

77
hub/services/templates/calculator/csp_roi_calculator.html
View file

@ -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()"]');