feat: add cute tooltip icons

joao-conde · Nov 25, 2024 · fd6ea46 · fd6ea46
1 parent 4fe9529
commit fd6ea46
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 10 deletions.
diff --git a/site/index.html b/site/index.html
@@ -36,7 +36,22 @@ <h1 class="title">
         <h3 class="chart-title">
           Heaviest Sets Weight
           <span class="tooltip">
-            <span class="tooltip-icon">?</span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="tooltip-icon lucide lucide-info"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="M12 16v-4" />
+              <path d="M12 8h.01" />
+            </svg>
             <span class="tooltip-text"
             >Heaviest weight lifted from all the sets of each workout per
               exercise.</span>
@@ -49,7 +64,22 @@ <h3 class="chart-title">
         <h3 class="chart-title">
           Heaviest Sets Repetitions
           <span class="tooltip">
-            <span class="tooltip-icon">?</span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="tooltip-icon lucide lucide-info"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="M12 16v-4" />
+              <path d="M12 8h.01" />
+            </svg>
             <span class="tooltip-text"
             >Number of repetitions done with the heaviest weight lifted from all
               the sets of each workout per exercise.</span>
@@ -62,7 +92,22 @@ <h3 class="chart-title">
         <h3 class="chart-title">
           Exercise Total Load
           <span class="tooltip">
-            <span class="tooltip-icon">?</span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="tooltip-icon lucide lucide-info"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="M12 16v-4" />
+              <path d="M12 8h.01" />
+            </svg>
             <span class="tooltip-text"
             >Total weight lifted in each workout per exercise. Total weight
               lifted for an exercise is calculated summing up all the sets'
@@ -76,7 +121,22 @@ <h3 class="chart-title">
         <h3 class="chart-title">
           Workout Total Load
           <span class="tooltip">
-            <span class="tooltip-icon">?</span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="tooltip-icon lucide lucide-info"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="M12 16v-4" />
+              <path d="M12 8h.01" />
+            </svg>
             <span class="tooltip-text"
             >Total weight lifted in each workout. Total weight lifted is
               calculated summing up all the sets' weight times the number of

diff --git a/site/styles.css b/site/styles.css
@@ -73,12 +73,6 @@ h3 {
   align-items: center;
   width: 15px;
   height: 15px;
-  font-size: 10px;
-  color: black;
-  background-color: white;
-  border: 1px solid black;
-  border-radius: 50%;
-  text-align: center;
 }
 
 .tooltip .tooltip-text {