From cd6660c53ed10d17e0abbdc4a324c338c0314d44 Mon Sep 17 00:00:00 2001
From: Lucas <hello@lucascm.dev>
Date: Wed, 22 Jan 2025 09:20:02 +0000
Subject: [PATCH] [Scorecards] Added tooltip to year variation element

---
 scoring/templates/scoring/council.html | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/scoring/templates/scoring/council.html b/scoring/templates/scoring/council.html
index 890613db..d2ff16b6 100644
--- a/scoring/templates/scoring/council.html
+++ b/scoring/templates/scoring/council.html
@@ -282,7 +282,7 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
                     <!-- TODO: Change text-success to text-dark if there is no variation -->
                     <!-- TODO: If there is no variation then display '-' -->
                     <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
-                    <p class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success">+5%</p>
+                    <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Variation with Action Scorecards 2023" class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
                 </td>
               {% else %}
                 <td class="score border-bottom border-opacity-25 border-primary is--section-score">
@@ -293,7 +293,7 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
                     <!-- TODO: Change text-success to text-dark if there is no variation -->
                     <!-- TODO: If there is no variation then display '-' -->
                     <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
-                    <p class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success">+5%</p>
+                    <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Variation with Action Scorecards 2023" class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
                 </td>
               {% endif %}
 
@@ -307,7 +307,7 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
                     <!-- TODO: If there is no variation then display '-' -->
                     <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
                     <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
-                    <p class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success">+1</p>
+                    <p button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Variation with Action Scorecards 2023" class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success border-0">+1</button>
                 </td>
               {% endfor %}
 
@@ -335,7 +335,7 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
                     <!-- TODO: If there is no variation then display '-' -->
                     <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
                     <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
-                    <p class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success">+1</p>
+                    <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Variation with Action Scorecards 2023" class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success border-0">+1</button>
                 </td>
 
               {% for comparison in answer.comparisons %}
@@ -348,7 +348,7 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
                     <!-- TODO: If there is no variation then display '-' -->
                     <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
                     <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
-                    <p class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success">+5%</p>
+                    <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Variation with Action Scorecards 2023" class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
                 </td>
               {% endfor %}
 
@@ -378,27 +378,25 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
                 </td>
                 <td class="score border-bottom border-opacity-25 border-primary is--section-score">
                     {{ plan_score.weighted_total|floatformat:0 }}%
-                    <span>{{ section.weighted_score|floatformat:0 }}%</span>
                     <!-- TODO: Change bg-green-100 to bg-red-100 if variation is negative -->
                     <!-- TODO: Change text-success to text-danger if variation is negative  -->
                     <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no variation -->
                     <!-- TODO: Change text-success to text-dark if there is no variation -->
                     <!-- TODO: If there is no variation then display '-' -->
                     <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
-                    <p class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success">+5%</p>
+                    <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Variation with Action Scorecards 2023" class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
                 </td>
 
               {% for comparison in comparisons %}
                 <td class="d-none d-md-table-cell score border-bottom border-opacity-25 border-primary is--section-score">
                     {{ comparison.weighted_total|floatformat:0 }}%
-                    <span>{{ section.weighted_score|floatformat:0 }}%</span>
                     <!-- TODO: Change bg-green-100 to bg-red-100 if variation is negative -->
                     <!-- TODO: Change text-success to text-danger if variation is negative  -->
                     <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no variation -->
                     <!-- TODO: Change text-success to text-dark if there is no variation -->
                     <!-- TODO: If there is no variation then display '-' -->
                     <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
-                    <p class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success">+5%</p>
+                    <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Variation with Action Scorecards 2023" class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
                 </td>
               {% endfor %}