Merge pull request #18 from madhuramendis/main

Update tooltips

Author: madhuramendis

_layouts/homepage.html

@@ -30,5 +30,13 @@
 
 {% include scripts.html %}
 
+<script>
+      $(document).ready(function () {
+    $('[data-bs-toggle="tooltip"]').each(function () {
+      new bootstrap.Tooltip(this);
+    });
+  });
+</script>
+
 </body>
 </html>

css/openchoreo.css

@@ -308,6 +308,11 @@ background-color: #fff;
 .cLogos img {
     width: 100%;
 }
+.cLogos:hover {
+     box-shadow: 15px 24px 84px -37px rgba(54,161,255,0.75);
+-webkit-box-shadow: 15px 24px 84px -37px rgba(54,161,255,0.75);
+-moz-box-shadow: 15px 24px 84px -37px rgba(54,161,255,0.75);
+}
 .cTextContainer {
     padding: 60px;
 }
@@ -349,6 +354,43 @@ background-color: #fff;
 	line-height: 24px;
 }
 
+/* Tooltips */
+
+
+
+
+ 
+
+
+    .tooltip-inner {
+      max-width: 300px;
+      background-color: #000;
+      color: #fff;
+      padding: 12px 16px;
+      font-size: 14px;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+      text-align: left;
+    }
+
+
+     .tooltip.bs-tooltip-top .tooltip-arrow::before {
+      border-top-color: red !important;
+    }
+
+    /* Optional: Customize other directions if needed */
+    .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
+      border-bottom-color: red !important;
+    }
+
+    .tooltip.bs-tooltip-start .tooltip-arrow::before {
+      border-left-color: red !important;
+    }
+
+    .tooltip.bs-tooltip-end .tooltip-arrow::before {
+      border-right-color: red !;
+    }
+
 /* DARK */
 body.cDarkMode {
     background-color: black;

index.html

@@ -87,50 +87,53 @@ <h2>Built on the Cloud Native Stack</h2>
       </div>
    </div>
    <div class="container">
+
+   
+    
       <div class="d-flex flex-wrap gap-3 d-flex justify-content-center list-unstyled ">
-         <div class="text-center cLogos">
+         <div class="text-center cLogos tooltip-wrapper" data-bs-toggle="tooltip" title="Visualizes runtime network flows and helps debug service-to-service communication.">
             <img src="/img/logos/logos-01.webp" />
          </div>
-         <div class="text-center cLogos">
+          <div class="text-center cLogos tooltip-wrapper" data-bs-toggle="tooltip" title="Powers OpenChoreo’s built-in CI/CD. Automates build, test, and deploy pipelines across environments and tracks.">
             <img src="/img/logos/logos-02.webp" />
          </div>
-         <div class="text-center cLogos">
+           <div class="text-center cLogos tooltip-wrapper" data-bs-toggle="tooltip" title="Enables zero-config builds in OpenChoreo’s built-in CI">
             <img src="/img/logos/logos-03.webp" />
          </div>
-         <div class="text-center cLogos">
+         <div class="text-center cLogos tooltip-wrapper" data-bs-toggle="tooltip" title="Enables low-level observability and security. OpenChoreo uses eBPF (via Cilium and Hubble) to monitor and trace network behavior.">
             <img src="/img/logos/logos-04.webp" />
          </div>
-         <div class="text-center cLogos">
+         <div class="text-center cLogos tooltip-wrapper" data-bs-toggle="tooltip" title="Provides zero-trust network policies and service connectivity between components.">  
             <img src="/img/logos/logos-05.webp" />
          </div>
-         <div class="text-center cLogos">
+        <div class="text-center cLogos tooltip-wrapper" data-bs-toggle="tooltip" title="Adds long-term storage and federation to Prometheus, enabling historical observability across clusters.">
             <img src="/img/logos/logos-06.webp" />
          </div>
-         <div class="text-center cLogos">
+         <div class="text-center cLogos tooltip-wrapper" data-bs-toggle="tooltip" title="Collects and ships logs from workloads to OpenSearch with low resource overhead.">
             <img src="/img/logos/logos-07.webp" />
          </div>
-         <div class="text-center cLogos">
+         <div class="text-center cLogos tooltip-wrapper" data-bs-toggle="tooltip" title="Scrapes metrics from workloads and platform components for monitoring and autoscaling.">
             <img src="/img/logos/logos-08.webp" />
          </div>
-         <div class="text-center cLogos">
+         <div class="text-center cLogos tooltip-wrapper" data-bs-toggle="tooltip" title="Orchestrates all components across environments. OpenChoreo workloads run natively as Kubernetes resources.">
             <img src="/img/logos/logos-09.webp" />
          </div>
-         <div class="text-center cLogos">
+        <div class="text-center cLogos tooltip-wrapper" data-bs-toggle="tooltip" title="Manages the OpenChoreo installation.">
             <img src="/img/logos/logos-10.webp" />
          </div>
-         <div class="text-center cLogos">
-            <img src="/img/logos/logos-11.webp" />
+          <div class="text-center cLogos tooltip-wrapper" data-bs-toggle="tooltip" title="Stores structured logs and supports querying and alerting for all platform events.">
+            <img src="/img/logos/logos-11.webp" /> 
          </div>
-         <div class="text-center cLogos">
+         <div class="text-center cLogos tooltip-wrapper" data-bs-toggle="tooltip" title="Exposes APIs and components securely. Forms the backbone of OpenChoreo ingress and egress.">
             <img src="/img/logos/logos-12.webp" />
          </div>
-         <div class="text-center cLogos">
-            <img src="/img/logos/logos-13.webp" />
-         </div>
-         <div class="text-center cLogos">
+             <div class="text-center cLogos tooltip-wrapper" data-bs-toggle="tooltip" title="Inspired the architecture and best practices behind OpenChoreo. Many concepts are battle-tested in WSO2 Choreo (IDP as a Service).">
             <img src="/img/logos/wso2-14.webp" />
          </div>
-      </div>
+          <div class="text-center cLogos tooltip-wrapper" data-bs-toggle="tooltip" title="OpenChoreo provides a Backstage plugin that integrates with its core APIs. ">
+            <img src="/img/logos/logos-13.webp" />
+         </div>
+     </div>
    </div>
 </section>
 <section class=" cLightBackground">
@@ -515,4 +518,5 @@ <h2>Ready to build the platform you always wanted?</h2>
 
       </div>
    </div>
-</section>
+</section>
+