From 6d228ce4bd2bcd5b1c50ae63b79c92219d848c1a Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Wed, 3 Jul 2024 12:16:05 +0300
Subject: [PATCH] add tooltip stats

---
 templates/shortcodes/grid_stats.html | 48 +++++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 5 deletions(-)

diff --git a/templates/shortcodes/grid_stats.html b/templates/shortcodes/grid_stats.html
index bb5845041..a806f9667 100644
--- a/templates/shortcodes/grid_stats.html
+++ b/templates/shortcodes/grid_stats.html
@@ -5,7 +5,8 @@
             {{body | markdown | safe }}
             <div class="items my-10 block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
                 <!-- capacity -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span>
                     <img
                         class="mx-auto p-4"
                         src="images/V3-08.png"
@@ -16,7 +17,8 @@
                     <span class="block text-md mt-4 font-normal capitalize">capacity</span>
                 </div>
                 <!-- cores -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of CPU (central processing unit) cores available on the grid</span>
                     <img
                         class="mx-auto p-4"
                         src="images/V3-11.png"
@@ -27,7 +29,8 @@
                     <span class="block text-md mt-4 font-normal capitalize">cores</span>
                 </div>
                 <!-- Nodes -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of nodes on the grid.</span>
                     <img
                         class="mx-auto p-4"
                         src="images/V3-09.png"
@@ -38,7 +41,8 @@
                     <span class="block text-md mt-4 font-normal capitalize">nodes</span>
                 </div>
                 <!-- countries -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
                     <img
                         class="mx-auto p-4"
                         src="images/V3-10.png"
@@ -49,7 +53,8 @@
                     <span class="block text-md mt-4 font-normal capitalize">countries</span>
                 </div>
                  <!-- farms -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of farms on the grid.</span>
                     <img
                         class="mx-auto p-4"
                         src="images/farm.png"
@@ -103,6 +108,39 @@
       background-color:#5596f5 !important;
     }
 
+ 
+
+/* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  font-size: 14px;
+  visibility: hidden;
+  width: 250px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 10px;
+  border-radius: 4px;
+ 
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+  bottom: -50px;
+  right: -60px;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+
 </style>