reqrote volatility with proper standard deviation and added tooltip

src/assets/css/_bootstrap.scss

@@ -41,7 +41,7 @@
 // @import 'bootstrap/scss/spinners';
 @import 'bootstrap/scss/tables';
 @import 'bootstrap/scss/toasts';
-// @import 'bootstrap/scss/tooltip';
+@import 'bootstrap/scss/tooltip';
 @import 'bootstrap/scss/transitions';
 
 // Optional helpers

src/assets/css/main.scss

@@ -380,6 +380,20 @@ $tiers: (
     drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
 }
 
+.tooltip.volatility-popover .tooltip-inner {
+  background: #1d1f21;
+  color: #e9ecef;
+  padding: 0.9rem 1rem;
+  border-radius: 0.6rem;
+  text-align: left;
+  max-width: 260px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.tooltip.volatility-popover .tooltip-arrow::before {
+  border-top-color: #1d1f21 !important;
+}
+
 /* --------------------------------------------------
    Pricing
 -------------------------------------------------- */

src/assets/js/main.js

@@ -1,6 +1,6 @@
 import * as bootstrap from 'bootstrap';
 window.bootstrap = bootstrap;
-
+import 'bootstrap/dist/js/bootstrap.bundle.min.js';
 
 // trap browser back and close the modal if open
 const cardModal = document.getElementById('cardModal');
@@ -24,4 +24,29 @@ cardModal.addEventListener('hide.bs.modal', () => {
   if (history.state && history.state.modalOpen) {
     history.back();
   }
-});
+});
+
+
+  import { Tooltip } from "bootstrap";
+
+  // Initialize all tooltips globally
+  const initTooltips = () => {
+    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
+      if (!el._tooltipInstance) {
+        el._tooltipInstance = new Tooltip(el, {
+          container: 'body',   // ensures tooltip is appended to body, important for modals
+        });
+      }
+    });
+  };
+
+  // Run on page load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initTooltips);
+  } else {
+    initTooltips();
+  }
+
+  // Optional: observe DOM changes for dynamically added tooltips (e.g., modals loaded later)
+  const observer = new MutationObserver(() => initTooltips());
+  observer.observe(document.body, { childList: true, subtree: true });