From 33a0d0ffb12c9b37c32887f7d7dacc4cec549337 Mon Sep 17 00:00:00 2001
From: Gabe Farrell <gabe@mnrva.dev>
Date: Thu, 22 Jun 2023 05:00:26 +0000
Subject: [PATCH] Add hovers to browse page response rates

---
 .../categories/_subcategory_section.html.erb  | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/app/views/categories/_subcategory_section.html.erb b/app/views/categories/_subcategory_section.html.erb
index 4296efd7..5f808c55 100644
--- a/app/views/categories/_subcategory_section.html.erb
+++ b/app/views/categories/_subcategory_section.html.erb
@@ -9,15 +9,33 @@
       <div class="d-flex flex-column mx-7">
         <p class="body-large "><%= subcategory.description %></p>
         <div class="d-flex justify-content-start">
-          <div class="body-large text-center response-rate">
-            <p class="response-rate-percentage"><%= subcategory.admin_collection_rate.first %> / <%= subcategory.admin_collection_rate.last %></p>
-            <p>school data sources</p>
+          <div 
+            class="body-large text-center response-rate"
+            data-bs-toggle="popover"
+            data-bs-trigger="hover focus"
+            data-bs-content="The number of publicly available school data sources, often collected from the MA Department of Elementary and Secondary Education."
+            data-bs-placement="bottom"
+          >
+          <p class="response-rate-percentage"><%= subcategory.admin_collection_rate.first %> / <%= subcategory.admin_collection_rate.last %></p>
+            <p>school admin data sources</p>
           </div>
-          <div class="body-large mx-3 text-center response-rate">
+          <div 
+            class="body-large mx-3 text-center response-rate"
+            data-bs-toggle="popover"
+            data-bs-trigger="hover focus"
+            data-bs-content="The student survey response rate for this sub-category. This number differs from the overall response rate because each individual student receives 44 of 66 total questions, in order to avoid survey fatigue."
+            data-bs-placement="bottom"
+          >
             <p class="response-rate-percentage"><%= subcategory.student_response_rate %></p>
             <p>of students responded</p>
           </div>
-          <div class="body-large text-center response-rate">
+          <div 
+            class="body-large text-center response-rate"
+            data-bs-toggle="popover"
+            data-bs-trigger="hover focus"
+            data-bs-content="The teacher survey response rate for this sub-category. This number differs from the overall response rate because the survey includes skip logic to limit the number of questions for each individual survey respondent."
+            data-bs-placement="bottom"
+          >
             <p class="response-rate-percentage"><%= subcategory.teacher_response_rate %></p>
             <p>of teachers responded</p>
           </div>